单列水平居中篇

 　　　　

　　　　1.inline-block + text-align

html：　　　

<div class="container"> 
    <div class="content">我是单列水平居中哦</div> 
</div>

css：

.container{display: inline-block} 
.content{text-align: center}

 效果图：

　　　　2.margin:0 auto

html:

 

<div class="container"> 
    <div class="content">我是单列水平居中哦</div> 
</div>

 

css：

.content{
        width: 100px; 
        margin: 0 auto; 
}        

效果图：

 

　　3.table + margin

html:

<div class="container"> 
    <div class="content">我是单列水平居中哦</div> 
</div>

css:

.content{display:table;margin: 0 auto;}

　　效果图：

 

　　4.absolute

html:

<div class="container"> 
    <div class="content">我是单列水平居中哦</div> 
</div>

css:

.container{ position: relative; }
.content{ position: absolute; left: 50%; width: 100px; margin-left: -50px; }

　　效果图：

 

　　5.flex

html:

<div class="container"> 
    <div class="content">我是单列水平居中哦</div> 
</div>

css:

.container{display:flex; justify-content:center;}
/*
.container{display:flex;}
.content{margin:0 auto;}
*/

　　效果图：

 

　　6.absolute + transform

html：

<div class="container"> 
    <div class="content">我是单列水平居中哦</div> 
</div>

 css:

.container{ position: relative; } 
.content{ position: absolute; left: 50%; transform: translateX(-50%);}

　　效果图：