CSS布局之居中

CSS布局之居中

本文主要是介紹水準居中，垂直居中，還有水準垂直居中的方法

水準居中

1.行内元素水準居中 使用text-align:center;就可以實作行内元素的水準居中，但是記得要在父元素中設定，會對子元素生效。此方法對，inline、inline-block、inline-table、inline-flex都有效。

.box{

text-align:center;

}

此外，如果塊級元素包着一個塊級元素，那麼我們可以設定外部盒子text-align:center;給内部盒子設定display:inline-block;這樣也可以使得内部元素居中。但要注意的是，内部盒子已經設定了display:inline-block，就不可以再設定其他的display，是以最好不要使用這種方法。

複制代碼

2.塊級元素水準居中

使用margin居中

margin：0 auto;但是使用這種方法，要記得給元素設定寬度，否則不會生效

使用absolute+transform

absolute定位，左 50%，然後使用transform向左移動50%；

3.浮動元素水準居中

已知寬度，通過子元素設定relative+負margin　　

.child{

width:200px;

float:left;

position:relative;

left:50%;

margin:-100px;

未知寬度，父子元素都用相對定位

.parent{

postion:relative;

right:50%;

父元素相對于左定位50%；且因為，父元素的寬度是由子元素撐起來的，是以當子元素相對于自身右定位50%時，水準居中

示例 當我們把child的定位取消時

打開child的相對定位時

4.絕對定位元素水準居中 這種方式通過子元素的絕對定位，外加margin:0 auto;

postion:absolute;

width:100px;

height:100px;

background:red;

margin:0 auto;

left:0;

right:0;

垂直居中

1.單行内聯元素垂直居中 這種方法适合對單行文本的垂直居中，比如應用在頂部菜單欄中

line-height:100px;

2.塊級元素垂直居中

使用absolute+負margin

position:absolute;

top:50%;

margin-top:-50px;

使用absolute+tranform

transform:translateY(-50%);

水準垂直居中

可以參考上面的水準居中和垂直居中的方法，結合起來就可以了。

原文位址

https://www.cnblogs.com/seanxushuo/p/11397849.html