本文是根據網上資料總結出來的文章

水平居中

行內元素的水平居中

如果被設置元素為文本、圖片等行內元素時，在父元素中設置text-align:center實現行內元素水平居中，將塊級元素的display設置為inline-block，使塊級元素變成行內元素，也可以水平居中。

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div>
</div>

<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>
 

塊狀元素的水平居中

1.當被設置元素為定寬塊級元素時用 text-align：center 就不起作用了。可以通過設置“左右margin”值為“auto”來實現居中的。

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div>
</div>

.child{
     width: 200px;
     margin: 0 auto;
}
 

2.為“不定寬度的塊級元素”設置居中,可以直接給不定寬的塊級元素設置text-align：center來實現，也可以給父元素加text-align:center 來實現居中效果。當不定寬塊級元素的寬度不要占一行時，可以設置display 為 inline 類型或inline-block（設置為 行內元素 顯示或行內塊元素）。

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}
 

垂直居中

父元素是盒子容器且高度已經設定

1.子元素是行內元素，高度是由其內容撐開的

設定父元素的行高（line-height）等於本身的高

<div class="wrap line-height">
    <span class="span">111111</span>
</div>

.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }

2.子元素是塊級元素但是子元素高度沒有設定

<div class="wrap">
    <div class="non-height ">11111</div>
</div>

.wrap{
       width:200px ;
       height: 300px;
       border: 2px solid #ccc;
　　display: table-cell;
　　vertical-align: middle;
}
 .non-height{
       background: green;
}

3.子元素是塊級元素且高度已經設定

<div class="wrap ">
    <div class="div1">111111</div>
</div>

.wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
        }
.div1{
            width:100px ;
            height: 100px;
            margin-top: 100px;
            background: darkblue;
        }

水平垂直居中

1.水平對齊+行高
text-align + line-height實現單行文本水平垂直居中
2.水平+垂直對齊
text-align + vertical-align,在父元素設置text-align和vertical-align，並將父元素設置為table-cell元素，子元素設置為inline-block元素,若子元素是圖像，可不使用table-cell，而是其父元素用行高替代高度，且字體大小設為0。子元素本身設置vertical-align:middle.
3.相對+絕對定位

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <div class="child" style="background-color: lightblue;">測試文字</div>
</div>

<style>
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    width: 80px;
    margin: auto;
}
</style>

4.相對+絕對定位+transform

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <div class="child" style="background-color: lightblue;">測試文字</div>
</div>

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

5.flex

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <div class="child" style="background-color: lightblue;">測試文字</div>
</div>

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

CSS布局(三) 對齊方式