<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.one {
width: 100px;
height: 100px;
background: red;
}
.box2 {
width: 300px;
height: 300px;
border: 1px solid #000;
display: flex;
}
.one2 {
width: 100px;
height: 100px;
background: red;
margin: auto;
}
.box3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box4 {
position: absolute;
/* // 绝对定位 */
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100px;
height: 100px;
background: red;
}
.box5 {
float: left;
position: relative;
left: 50%;
}
.box5>span {
float: left;
left: -50%;
position: relative;
}
</style>
</head>
<body>
<h1>如何让盒子水平垂直居中 方法一</h1>
<div class="box">
<div class="one"></div>
</div>
<h1>如何让盒子水平垂直居中 方法二</h1>
<div class="box2">
<div class="one2"></div>
</div>
<h1>不知道宽度如何水平垂直居中</h1>
<div class="box3">没有宽度水平垂直居中</div>
<div class="box5"><span>没有宽度水平居中 例子,分页, 可能2-5页, 所以宽度不确定</span></div>
<div class="box4">绝对定位水平垂直居中</div>
</body>
</html>
效果图
方法一: 给父元素加
display :flex;
jusitfy-content:center;
align-items:center;
方法二:给父元素加
display:flex;
子元素加 margin:auto; 就OK了,是不是很简单
垂直水平居中
水平居中
块级元素水平居中
1, 最简单的方法: 给一个显示的宽度, 然后margin: 0 auto; 就可以设置水平居中了.
2, 不知道宽度怎么水平居中
方法一:
position: absolute; //绝对定位
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
方法二:
页面结构: <div class="box5"><span>没有宽度水平居中例如, 做一个分页的样式, </span></div>
.box5 {
float: left;
position: relative;
left: 50%;
}
.box5>span {
float: left;
left: -50%;
position: relative;
}
绝对定位水平垂直居中
.box4 {
position: absolute;
/* // 绝对定位 */
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100px;
height: 100px;
background: red;
}
box4
所以, 水平垂直居中有几种方法:
- 有父元素的 display:flex; 子元素 margin:auto;
- 没有父元素的, 使用绝对定位 和 transform属性, translate x y 轴平移
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
水平居中:
- 有宽度的, margin: 0 auto;
- 没有宽度的, 父子元素 先左浮动, 再相对定位, left:50%, 子元素,left:-50%
.box5 { float: left; position: relative; left: 50%; } .box5>span { float: left; left: -50%; position: relative; }
