技術標籤：垂直居中csscss3html

垂直居中的幾種方法

	<div class="outer">
		<div class="inner"></div>
	</div>

圖示：

1.相對定位+transform

父元素下只有一個元素，且父元素設定了高度

	.outer {
        width: 300px;
        height: 200px;
        background: darkkhaki;
      }
      .inner {
        width: 100px;
 

        height: 100px;
        background: darksalmon;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }

2.相對定位+絕對定位+transform

父盒子和子盒子都不知道高度的時候使用

	.outer {
        width: 300px;
        height: 200px;
        background: darkkhaki;
        position: relative;
      }
 

      .inner {
        width: 100px;
        height: 100px;
        background: darksalmon;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }

3.flex

不相容老式瀏覽器

	.outer {
        width: 300px;
        height: 200px;
        background: darkkhaki;
        display: flex;
        align-items
 
: center;
      }
      .inner {
        width: 100px;
        height: 100px;
        background: darksalmon;
      }