Zentrum ein div intelligenter mit CSS

ich mit dem folgenden Code ein Objekt bin Zentrierung:Zentrum ein div intelligenter mit CSS

.object { 
    width: 70%; 
    height: 70%; 
    position: absolute; 
    top: 50%; 
    left:50%; 

    /* these are the lines to which I will refer */ 
    margin-top: -350px; 
    margin-left: -350px; 
}

I Marge oben bin mit und verließ die Hälfte der Objektgröße zu subtrahieren aber, dass Größe gegeben ist als ein Prozentsatz. Also meine Frage ist, gibt es eine Möglichkeit, diese Ränder zuzuordnen, so dass ich sie nicht jedes Mal manuell ändern muss, wenn ich die Boxgröße ändere?

Quelle

2017-08-09 Rafael Antonio Pimienta López

Sie% in margin-top und margin-left verwenden können, können Sie es hier arbeiten sehen. https://www.w3schools.com/cssref/playit.asp?filename=playcss_margin-top&preval=10%25 –

Sie könnten einige jQuery schreiben, um diese Beträge für Sie zu berechnen. –

Sie sollten flex verwenden.

HTML

<body> 
    <div class="square"></div> 
</body>

CSS

body{ 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: center; 
} 
.square{ 
    width: 200px; 
    height: 200px; 
    background-color: red; 
}

Quelle

2017-08-09 15:49:33 zynkn

Ja .. Es ist nur Fehler .. Ich habe behoben. – zynkn

Ich würde eine Link-Browser-Unterstützung für FlexBox zeigen. Nicht alle Browser akzeptieren dies und es kann für einige Benutzer irreführend sein, wenn sie es auf einer Website implementieren, da es denkt, dass es überall funktioniert, und es für viele Benutzer, die nicht unterstützte Browser verwenden, durchbrochen wird. – Lansana

@Lansana Vielen Dank für Ihren Kommentar! – zynkn

Einer der viele Möglichkeiten - nutzen transform Eigenschaft das Element zum Zentrum - siehe Demo unter:

.object { 
 
    width: 70%; 
 
    height: 70%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left:50%; 
 
    border: 1px solid red; 
 
    transform:translate(-50%, -50%); 
 
}

<div class="object">Two</div>

Quelle

2017-08-09 15:51:41 kukkuz

.main_div{ 
 
    width:200px; 
 
    height:200px; 
 
    border:thin black solid; 
 
    position:relative; 
 
} 
 

 
.main_div .object { 
 
    width: 70%; 
 
    height: 70%; 
 
    position: absolute; 
 
    transform:translate(-50%, -50%); 
 
    top: 50%; 
 
    left:50%; 
 
    border: thin red solid; 
 
    
 
}

<div class="main_div"> 
 
    <div class="object">Object Div Text</div> 
 
</div>

Hoffnung, das hilft.

Quelle

2017-08-09 15:54:03

Für mich ist die beste Option, die Sie haben, die transform:translate Eigenschaft zu verwenden.

.object { 
    position: absolute; 
    top: 50%; 
    left: 50%; 

    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

Keine Notwendigkeit mehr, die width/2 und height/2 Marge ta zu berechnen.

Und wenn Sie SASS verwenden, hier ist eine magische @mixin zu verwenden:

@mixin transform($transforms) { 
    -moz-transform: $transforms; 
    -o-transform: $transforms; 
    -ms-transform: $transforms; 
    -webkit-transform: $transforms; 
    transform: $transforms; 
} 

@mixin center($position: "both") { 
    position: absolute; 

    @if $position == "vertical" { 
    top: 50%; 
    @include transform(translateY(-50%)); 
    } 

    @if $position == "horizontal" { 
    left: 50%; 
    @include transform(translateX(-50%)); 
    } 

    @if $position == "both" { 
    top: 50%; 
    left: 50%; 
    @include transform(translate(-50%, -50%)); 
    } 
}

Dann verwenden Sie einfach

.object { 
    // both vertical and horizontal 
    @include center; 

    // only vertical 
    @include center(vertical); 

    // only horizontal 
    @include center(horizontal); 
}

Quelle

2017-08-09 16:01:24

Danke für das Mixen, definitiv das zu stehlen. – Lansana

Gern geschehen. Betrachtet es als ein Geschenk :) –

Warum nicht margin: 0 auto verwenden?

.object { 
    width: 70%; 
    height: 70%; 
    position: absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:0 auto; 
}

https://jsfiddle.net/p9hy06tg/4/

Quelle

2017-08-09 16:02:02 boang3000

Zentrum ein div intelligenter mit CSS

Antwort

Verwandte Themen