CSS居中方式總結

2021-08-16 21:33:42 字數 1315 閱讀 3139

一、水平居中

1、行內元素或者display為inline的塊級元素，前提是子元素沒有float;

對父元素設定：text-align：center;

2、塊級元素(已知寬高)：

1)、元素自身設定為 margin:0 auto;

2)、利用絕對定位和margin結合的方式：

.elem
3、塊級元素(未知寬高)：

1)、將元素放入table單元格中，設定table為 margin:0 auto;

2)、用display屬性將元素變成行內元素，然後父元素設定text-align：center;

3)、父元素左浮動，並相對定位，left:50%;子元素設定相對定位和 left:-50%；

(即設定父元素和子元素分別往相反的方向移動50%) 如下：

float:left;

position:relative;

left:50%;

clear:both;

}.wrap-center

class="wrap">

class="wrap-center">hello worlddiv>

div>

4、採用flex布局，日常未用過，不多說；

二、垂直居中

1、行內元素：設定line-height屬性或者是通過 vertical-align方式

2、塊級元素的垂直居中也與水平居中類似，利用設定margin的方法以及通過絕對定位和margin結合的方式都可以；

三、水平垂直居中

在日常布局使用時，我們比較少單獨使用一種居中方式，更多的還是讓元素水平垂直居中；

1、對於行內元素，一般採用line-height和text-alian結合的方式實現：

2、對於塊級元素，比較常用的一般有三種：

1)、若元素寬高已知，則通過設定絕對定位為50%,然後向相反的方向移動自身一半的寬高；

.elem
2)、若元素寬高未知，採用css3的transform屬性(支援ie9+)，原理和上面一樣(寬高已知也可以用)；

.elem
3)、利用絕對定位和margin結合的方式：

.elem
4)、table-cell方法，使元素如**一樣展示：

.elem
5)、flex彈性布局：

.elem

CSS居中方式總結

1.text align center 使用以上方式居中是將父級容器中display inline 的行內元素或者文字進行水平居中。2.inline height height 值 使用inline height時經常和height一起使用，使得內容垂直方向上居中，建議在列表內部的li中使用 3.m...

CSS居中方式總結

1.text align center 使用以上方式居中是將父級容器中display inline 的行內元素或者文字進行水平居中。2.inline height height 值 使用inline height時經常和height一起使用，使得內容垂直方向上居中，建議在列表內部的li中使用 3.m...

css居中方式

水平居中的text align center 和 margin 0 auto 前者是針對父元素進行設定而後者則是對子元素。他們起作用的首要條件是子元素必須沒有被float影響。垂直居中的line height 作用在父元素上，當他的值等於父元素的height值時，內部的文字就會自動的垂直居中 萬能p...