天天看點

css實作垂直居中的幾種方式(布局常用)

前提:

html模闆:

<div class="parent">

<div class="content">内容垂直居中</div>

</div>

聲明:以下示例,主要實作垂直居中的樣式代碼為加粗的部分

一、對單行元素進行垂直居中時

1、可設定該行内元素的父元素的height與line-heigth的值相等,讓行内元素垂直居中

2、針對行内元素,可通過設定vertical-align: middle;以及line-height進行垂直居中

二、對文本進行垂直居中

1、針對文本,通過display:flex;配合align-items和justify-content實作文本居中

.content{

display: flex;

align-items: center;

justify-content: center;

}

三、對已知高度塊級元素進行垂直居中

1、絕對定位,配合top:50%和負margin-top(元素高度一半)進行垂直居中

.content{

position: absolute;

top: 50%;

left: 50%;

margin-top: -10em;

margin-left: -10em;

width: 20em;

height: 20em;

background-color: aqua;

}

2、絕對定位,配合top:0;bottom:0;和margin:auto進行垂直居中

.content{

position: absolute;

margin:auto;

top: 0;

bottom: 0;

left: 0;

right: 0;

height: 200px;

background-color: aqua;

}

3、設定position:absolute;和calc()函數實作垂直居中

.content{

position: absolute;

top:calc(50% - 10em);

left: calc(50% - 20em);

width: 40em;

height: 20em;

background-color: aqua;

}

4、使用浮動float實作元素垂直居中

原理:通過在要進行垂直居中的元素a前面添加一個無内容的元素,并将該無内容元素的高設定為50%,在利用clear:botn清除浮動,則元素a相對于父元素來說是垂直居中。

html如下:

<div class="parent">

<div class="float"></div>

<div class="content">

<div><span>内容垂直居中内容垂直居中内容容垂居中</span></div>

</div>

</div>

css如下:

.parent{

height: 500px;

background-color: red;

}

.float{

background-color: aqua;

}

2、居于視口機關的解決方案:

可通過使用margin-top: 50vh;配合transform:translateY(-50%);實作視口居中

.content{

width: 18em;

margin-top: 50vh;

transform: translateY(-50%);

background-color: aqua;

}

3、通過display:table-cell和vertical-align:middle;實作垂直居中

.parent{

display: table;

width: 50px;

height: 500px;

}

.content{

display: table-cell;

vertical-align: middle;

background-color: aqua;

}

4、基于flex的解決方案:

.parent{

display: flex;

background-color: beige;

}

.content{

margin: auto;

background-color: aqua;

}

繼續閱讀