css居中問題

1、水平居中

1.1、行內元素直接水平居中（text-align）

text-align:center;

只要父元素設置該屬性值，所有的行內子元素都會水平居中。且該屬性有繼承性

2、確定寬度的塊級元素實現水平居中

2.1、自動邊距實現水平居中（margin）

margin: 0 auto;

具有寬度的塊級元素設置上面屬性后就會在父元素中左右居中

2.2、絕對定位和負邊距實現水平居中（absolute+margin）

.parent {
  position: relative;
}

.children {
  width: 150px;
  height: 150px;
  background: #d780c9;
  position: absolute;
  left: 50%;
  margin-left: -75px;
}

將父元素定位為 relative，子元素定位為 absolute，子元素就會相對于父元素進行定位，left 設為50%，margin-left 為寬度的一半，由此實現了左右居中。

2.3、絕對定位和0實現居中（absolute+left+right+top+bottom）

該方法可實現垂直水平居中

.parent {
　 display: relative;
}
.children {
  width: 150px;
  height: 150px;
  background: #d780c9;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

將子元素設為 position: absolute + （left=0+top=0+right=0+bottom=0）+ margin: auto，將父元素定位為 relative，由此子元素將會在父元素中垂直水平居中。如果父元素沒有相對定位，則該元素相對于整個窗口垂直水平居中。

3、不確定寬度的元素實現水平居中

3.1、絕對定位和transform實現水平居中（absolute+transform）

.children {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

3.2、flex 布局實現水平居中

.parent{
  display: flex;
  justify-content: center;
}

3.3、table 加自動 margin 實現左右居中（table+margin）

.children {
  display: table;
  margin: 0 auto;
}

在某一元素中設置display為table，左右外邊距自動，由此可實現在父元素中左右居中。

3.4、設為行內元素實現水平居中（inline-block+text-align）

.parent {
  text-align: center;
}
.children {
  display: inline-block;
  /*或者： display: inline; */
}

子元素設為行內元素，父元素通過屬性 text-align 設置行內元素居中。

4、垂直居中

4.1、flex實現垂直居中

.parent{
  display: flex;
  align-items: center;
}

4.2、絕對定位和負邊距（absolute+margin）

.parent {
  position: relative;
}
.children {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  margin-top: -75px;
}

4.3、table-cell實現垂直居中（table-cell+vertical-align）

.parent{
  display: table-cell;
  vertical-align: middle;
}

由此父元素中的子元素全部都實現了垂直居中

4.4、絕對定位和0

參考上面的2.3

4.5、絕對定位和transform

參考上面的3.1

詳細參考：https://blog.csdn.net/dengdongxia/article/details/80297116

posted @ 2019-03-11 21:32 wenxuehai 閱讀(278) 評論(0) 收藏舉報

刷新頁面返回頂部

//右下角添加目錄

提升自己，才有選擇的能力和勇氣