前端随心记---------面试题
1.在父元素中水平垂直居中 <div class="box"> <div class="inner"> </div> </div> .box{ display: flex; justify-content: center;/* 水平居中 */ align-items: center;/* 垂直居中 */ width: 500px; height: 500px; border: 1px solid red; } .inner{ width: 200px; height: 200px; background-color: red; } 2.始终在屏幕水平垂直居中 .box{ width: 100px; height: 100px; background:red; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); } 3.始终在屏幕水平垂直居中 .box{ width:200px; height: 200px; background:red; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; } 4.始终在屏幕水平垂直居中 .box{ width: 600px; height: 600px; background: red; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } 5.实现文字水平居中 .box { display: table-cell; vertical-align: middle; text-align: center; width: 240px; height: 180px; border:1px solid #666; }
垂直居中的五种方案
集思广益,仅供学习,侵权即删!!