css種盒子居中對齊的問題
阿新 • • 發佈：2019-01-22
1.沒有定位的盒子水平居中
1.讓盒子的文字內容居中對齊: text-align: center
2.外邊距實現盒子水平居中對齊，需要滿足以下兩個條件
*1.必須是塊級元素*
*2.盒子必須指定了寬度*
width: 500px;
margin:0 auto; (上下為0，左右auto)2.絕對定位的盒子居中對齊
水平居中
1.首先讓盒子left:50%,走父盒子一半的大小
2.然後向左走自己盒子一半的大小，margin-left:負px。
垂直居中
1.首先讓盒子top:50%,走父盒子一半的大小
2.然後向上走自己盒子一半的大小，margin-top: 負px。
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { text-align: center; width: 200px; height: 200px; background-color: red; position: absolute; /*水平居中*/ left: 50%; margin-left: -100px; /*這裡是關鍵*/ /*垂直居中*/ top: 50%; margin-top: -100px; } </style> </head> <body> <div>div的文字</div> </body> </html>也可以用transform實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { text-align: center; width: 200px; height: 200px; background-color: red; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); //或者 transform: translateX(-50%); transform: translateY(-50%); } </style> </head> <body> <div>div的文字</div> </body> </html>
3、flex實現居中對齊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.main{
width: 500px;
height: 500px;
background-color: black;
display: flex;
/* 水平方向(主軸對齊) */
justify-content: center;
/* 垂直方向（交叉軸對齊） */
align-items: center;
}
.son{
width: 100px;
height: 100px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="main">
<div class="son"></div>
</div>
</body>
</html>