CSS水平垂直居中
<!--使一个div居中--> <div> 1 1 1 </div>
/*div宽高未知:通过绝对定位和transform*/ div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #AFEEEE; }
/*div宽高已知:通过绝对定位和margin*/ div { position: absolute; top: 50%; left: 50%; margin: -100px; width: 200px; height: 200px; background-color: #AFEEEE; }
/*div宽高已知或未知:通过flex布局和margin*/ body { display: flex; /*必须设置min-height为100vh*/ min-height: 100vh; /*margin: 0;*/ } div { margin: auto; /*此方法宽高已知未知都适用*/ /*width: 200px; height: 200px;*/ background-color: #AFEEEE; }
/*div宽高已知或未知:通过flex布局*/ body { display: flex; /*必须设置min-height为100vh*/ min-height: 100vh; justify-content: center; align-items: center; } div { /*此方法宽高已知未知都适用*/ /*width: 200px; height: 200px;*/ background-color: #AFEEEE; }
<!--使div中的p元素居中--> <div> <p>1</p> </div>
/*使用flex布局*/ div { display:flex ; justify-content: center; align-items: center; width: 200px; height: 200px; background-color: #AFEEEE; }
/*使用table-cell和对齐*/
div { display: table-cell; text-align: center; vertical-align: middle; /*position: relative;
overflow:hidden;*/ width: 200px; height: 200px; background-color: #AFEEEE; }
* {
margin:0;
padding:0;
}