中心一個div更加智能化與CSS

我爲中心的對象用下面的代碼：中心一個div更加智能化與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; 
}

我使用保證金頂部和左減去物體大小的一半，但該尺寸給出百分比。所以我的問題是有一種方法來分配這些邊距因此，我不必每次手動改變它們，每次我改變盒子的大小？

來源

2017-08-09 Rafael Antonio Pimienta López

可以在邊距和利潤率左使用％，你可以看到它在這裏工作。 https://www.w3schools.com/cssref/playit.asp?filename=playcss_margin-top&preval=10%25 –

你可以寫一些jQuery來爲你計算這些金額。 –

您應該使用flex。

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; 
}

來源

2017-08-09 15:49:33 zynkn

是的..這只是錯誤..我修好了。 – zynkn

我會顯示FlexBox的鏈接瀏覽器支持。並非所有的瀏覽器都接受它，並且可能會誤導某些用戶在網站中實施它，認爲它可以在任何地方使用，並且可以讓使用不受支持瀏覽器的許多用戶獲得中斷。 – Lansana

@Lansana感謝您的評論！ – zynkn

之一許多方式 - 使用transform屬性來居中元素 - 看演示如下：

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

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

來源

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>

希望這有助於。

來源

2017-08-09 15:54:03

對我來說，最好的選擇是使用transform:translate屬性。

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

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

無需再TA計算width/2和height/2保證金。

如果你正在使用SASS，這裏是一個神奇的@mixin使用方法：

@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%)); 
    } 
}

然後，只需使用

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

    // only vertical 
    @include center(vertical); 

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

來源

2017-08-09 16:01:24

感謝您的混合，絕對偷竊。 – Lansana

不客氣。把它當作禮物:) –

爲什麼不使用margin: 0 auto？

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

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

來源

2017-08-09 16:02:02 boang3000

中心一個div更加智能化與CSS

回答

相關問題