一、水平居中方法 1.行內元素、字體的水平居中 1.對於行內元素（display值為inline或inline block都可以）或者字體：父元素添加css規則：text align：center; 2.塊元素的水平居中 1.使用margin實現水平居中 將margin left 和 margin ...
一、水平居中方法
1.行內元素、字體的水平居中
1.對於行內元素（display值為inline或inline-block都可以）或者字體：父元素添加css規則：text-align：center;
<style>
p{
/*關鍵*/
text-align:center;
}
ul{
/*關鍵*/
text-align:center:
}
/*這裡li設置inline-block*/
.item{
/*關鍵*/
display:inline-block;
}
</style>
<!--字體-->
<p>I am ry</p>
<!--行內元素-->
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
2.塊元素的水平居中
1.使用margin實現水平居中
將margin-left 和 margin-right 設置為auto，塊元素將會自動匹配適應，實現水平居中
<style>
*{
margin:0;
padding:0;
}
.box1{
height:300px;
background:blue;
}
.item1{
/*關鍵，margin-left，margin-right設置為auto*/
margin: 0 auto;
width: 100px;
height: 100px;
background:red;
}
</style>
<body>
<div class="box1">
<div class="item1"></div>
</div>
</body>2.使用position+margin-left實現水平居中
定位後，設置left先整體偏移父容器的一半，再使用負margin-left自己一半的寬度，從而子元素中心對準父元素中心。
<style>
.box2{
position:relative;
height:300px;
background:blue;
}
.item2{
/*關鍵 相對定位*/
position: relative;
/*關鍵*/
left: 50%;
/*關鍵*/
margin-left:-50px;
width:100px;
height:100px;
background:red;
}
</style>
<body>
<div class="box2">
<div class="item2"></div>
</div>
</body>3.如果是多個塊元素在同一水平線居中排列，則將其display設置成inline-block，還有一種是使用flexbox的佈局方式來實現。
塊元素設置了inline-block後，擁有行內元素併排特點，只要父元素設置text-align即可使其水平居中。
<style>
.box3{
/* 關鍵，對於行內元素水平居中 */
text-align: center;
}
.item3{
/* 關鍵，將塊元素設置成行內塊接元素 */
display:inline-block;
width:100px;
height: 100px;
background:red;
}
</style>
<body>
<div class="box3">
<div class="item3"></div>
<div class="item3"></div>
<div class="item3"></div>
<div class="item3"></div>
</div>
</body>二、垂直居中
1.行內元素或者文字（單行情況）
1.可以直接使用line-height屬性來設置: 將line-height設置成和height一樣即可
<style>
.text{
height:100px;
line-height:100px;
border:1px solid red;
}
</style>
<body>
<div class="text">
we dont talk anymore
</div>
</body>2.使用padding（top,bottom）通過增加內邊距來實現垂直的居中
<style>
.ctext{
/*關鍵*/
padding-top:30px;
padding-bottom:30px;
border:1px solid red;
}
</style>
<body>
<div class="ctext">確認過眼神，我遇上對的人</div>
</body>2.行內元素或者文字（多行情況）
1.照樣可以使用padding（top 和 bottom）
2.對父元素設置display:table-cell 和 vertical-align:middle
<style>
.box{
/* 將其變成單元格的形式 */
display: table-cell;
/* width:100px; */
height:300px;
border:1px solid red;
/* 設置內聯元素的垂直對齊的方式 */
vertical-align: middle;
}
</style>
<body>
<div class="box">
<span>how to love</span><br>
<span>I knoe I need somebody</span><br>
<span>I know I need somebody</span><br>
<span>pary for me</span>
</div>
</body>3.塊元素垂直居中
1.確定寬高的情況
使用position 和 margin-top配合
<style>
*{
margin:0;
padding:0;
}
/* 父元素 */
.parent{
position:relative;
height:400px;
border: 1px solid blue;
}
/* 子元素 */
.child{
/* position */
position: relative;
/* 距離頂部50% */
top:50%;
/* 再用margin-top 向上調子容器一半高度，則剛好子元素中心對準父元素中心 */
margin-top:-100px;
height:200px;
border:1px solid red;
}
</style>
<body>
<div class="parent">
parent
<div class="child">
child
</div>
</div>
</body>2.對於未知寬高的
使用transform 的 translateY(-50%) 向上平移自身一半
<style>
.parent2{
position: relative;
background:blue;
height:400px;
}
.child2{
position: relative;
top:50%;
transform: translateY(-50%);
background: red;
}
</style>
<div class="parent2">
parent2
<div class="child2">child2</div>
</div>3.使用flex佈局
<style>
.parent3{
/*關鍵flex*/
display:flex;
display: -webkit-flex;
/* 對齊排列居中 */
justify-content:center;
/* 排列方向垂直 */
flex-direction:column;
height:400px;
background:yellow;
}
.child3{
height:100px;
}
</style>
<body>
<!-- flexbox -->
<div class="parent3">
<div class="child3"></div>
</div>
</body>三、水平且垂直居中
1.position 和 margin 配合
<style>
*{
margin: 0 ;
padding: 0 ;
}
.box1{
position:relative;
height:400px;
background:blue;
}
.item1{
/*關鍵*/
position: absolute;
top: 50%;
left: 50%;
margin-top:-50px;
margin-left:-50px;
width:100px;
height:100px;
background: red;
}
</style>
<body>
<div class="box1">
<div class="item1"></div>
</div>
</body>2.使用flex佈局
同時設置兩條居中屬性 justify-content 和 align-items
<style>
.box2{
display: flex;
/*關鍵*/
justify-content: center;
/*關鍵*/
align-items: center;
height:300px;
background:yellow;
}
.item2{
width:50px;
height:50px;
background:red;
}
</style>
<body>
<div class="box1">
<div class="item1"></div>
</div>
<div class="box2">
<div class="item2"></div>
</div>
</body>本篇是個人筆記，可經常看看。向前走，也別忘記要多回顧
確認過眼神，我遇上對的人
Ry（元）
