css居中 水平居中,垂直居中,上下左右居中

網頁布局居中必不可少,其中包括水平居中,垂直居中,上下左右居中,下面一一詳述。

<

div 
class
="container"
>
<
div 
class
="item"
>居中
div>
div>

1.text-align: center;

對父元素設定text-align: center;子元素即可居中。但子元素是有限制的，只對，文字等行內元素有效。
如果子元素有一定寬度,可以設定子元素display:inline-block;

<

style
>
.container 
.item
style
>

2.margin: 0 auto;

元素本身設定 margin: 0 auto; 這種方法對能設定寬度的元素起作用.

<

style
>
.container 
.item
style
>

效果

3.position:absolute;

這種方法也需要固定元素的寬度.

<

style
>
.container 
.item
style
>

4.flex

<

style
>
.container 
.item
style
>

垂直居中

1.一行文字垂直居中

<

style
>
.center 
style
>

<

div 
class
="center"
>
這行文字垂直居中
div>

2.未知高度元素居中

第一種方法

<

div 
class
="container"
>
<
div 
class
="item"
>
<
p>垂直居中的元素
p>
<
p>垂直居中的元素
p>
div>
div>
<
style
>
.container 
.container:after 
.item 
style
>

<

style
>
.container 
.item 
style
>

3.高度已知垂直居中

第一種方法

<

div 
class
="container"
>
<
div 
class
="item"
>
<
p>垂直居中的元素
p>
<
p>垂直居中的元素
p>
div>
div>
<
style
>
.container 
.item 
style
>

<

style
>
.container 
.item 
style
>

<

style
>
.container 
.item 
style
>

上下左右居中

上下垂直居中,把上面的綜合起來就可以啦

1.子元素寬和高不確定

第一種方法

<

style
>
.container 
.item 
style
>

<

style
>
.container 
.container:after 
.item 
style
>

第一種方法

<

style
>
.container 
.item 
style
>

<

style
>
.container 
.item 
style
>

css 水平居中 垂直居中 水平垂直居中

一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...

css水平居中 垂直居中 水平垂直居中

css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...

css居中控制 水平居中 垂直居中

ul li橫排 ul li.container container ul.container listyle container container ul.container listyle 水平居中 1.如果被設定的元素是行內元素 text img 給父元素設定text align center即...