css 置中問題總結

標籤：垂直置中   表示   htm   1.5   logs   ica   mil   水平置中   isp   

html代碼：

<div class="box">    <div class="box-item">        文字    </div></div>

 

css樣式：

一、水平置中

.box-item{    text-align:center;}

　　*一般用於文字以及inline-block/inline水平置中 ，設定該值表示box-item內文字置中對齊

 

.box-item{    margin:0 auto;}

　　*一般用於類似div的block水平置中，表示box-item整個div在box內水平置中對齊

 

二、垂直置中

• 高度等於行高，適合單行文字置中對齊

.box-item{    line-height:30px;    height:30px}     

 

• margin為高度一半

.box{    width:100%;    height:100%;    margin:0;    padding:0}.box-item{    width:100px;    height:100px;    border:1px solid #ccc;    position:relative;    top: 50%;    margin: -150px auto 0 auto;}

 

•  前一種方式的改良版

.box{    width:100%;    height:100%;    margin:0;    padding:0}.box-item{    width:100px;    height:100px;    border:1px solid #ccc;    position:relative;    top: 50%;    margin:0 auto;    transform: translateY(-50%);}

 

• align-items存在相容性問題

.box {    display: flex;    align-items: center;     justify-content: center; }.box-item {    width: 300px;    height: 300px;    border: 1px solid #ccc;}

 

• 相容性較好的幾種：

.box-item{    margin:auto;    width:100px;    height:100px;    position:absolute;    top:0;    left:0;    bottom:0;    right:0;}

 

.box{    position: relative;    height:100%;    width:100%;}.box-item{    width: 100px;    height: 100px;    overflow: auto;    margin: auto;    position: absolute;    top: 0; left: 0; bottom: 0; right: 0;}

 

.box{    text-align: center;    overflow: auto;    height:100%;}.box:after,.box-item{    display: inline-block;    vertical-align: middle;}.box:after {    content: ‘‘;    height: 100%;    margin-left: -0.25em;}.box-item{    max-width: 99%;}

 

• 表格法

.box{    display:table;    width:100%;    height:100%;}.box-item {    display: table-cell;    vertical-align: middle;    text-align: center;}

 

css 置中問題總結