标签：排列 效果 ica alt 垂直 cal abs lex 必须
方法一：使用position 元素已知宽度
<div class="box"> <div class="content"></div> </div> <style> .box{width:400px; height: 400px;background:red;position: relative;} .content{width:150px;height: 100px;background:green; position: absolute;top:200px;left: 200px;margin-left:-75px;margin-top: -50px;} </style>
方法二：position tranform 元素宽度未知
<div class="box"> <div class="content"></div> </div> <style> .box{width:400px; height: 400px;background:red;position: relative;} .content{width:150px;height: 100px;background:green; position: absolute;top:200px;left: 200px;transform: translate(-50%,-50%);} </style>
得到的效果和上图一样
当使用这种方法将文字放在div水平垂直的位置的时候，会出现字体边缘模糊的结果，解决方法是：使用flex完成垂直居中,设置排列方向为column,并设置justify-content: center,最后用text-align: center完成水平居中。方能保证文字显示清晰。
方法三：felx布局
<style> .box{width:400px; height: 400px;background:red;display: flex;justify-content: center;align-items: center;} .content{width:150px;height: 100px;background:green;} </style> <div class="box"> <div class="content"></div> </div>
效果和上图一样
方法四：table-cell布局
因为table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了红色，不推荐使用
<style> .box{width:400px; height: 400px;background:red;display: table;} .content{background:blue;display: table-cell;vertical-align: middle;text-align:center;} .inner{background:green;display: inline-block;width: 150px;height: 100px;} </style> <div class="box"> <div class="content"> <div class="inner"></div> </div> </div>
标签：排列 效果 ica alt 垂直 cal abs lex 必须
原文地址：https://www.cnblogs.com/mexiaoxia/p/9839361.html
