css怎么设置居中
发布网友
发布时间：2022-04-22 10:42
共2个回答
懂视网
时间：2022-04-28 16:01
一：css如何设置文本文字垂直居中
1、line-height 使文字垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>效果图：
这样就能让div中的文字水平垂直居中了
2、CSS3的flex布局 使文字垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
/*设置为伸缩容器*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*垂直居中*/
-webkit-box-align: center;/*旧版本*/
-moz-box-align: center;/*旧版本*/
-ms-flex-align: center;/*混合版本*/
-webkit-align-items: center;/*新版本*/
align-items: center;/*新版本*/
}
</style>
</head>
<body>
<div class="box">css 垂直居中--文本文字（弹性布局）</div>
</body>
</html>效果图：
1.Div垂直居中效果怎么实现
2.div标签：水平居中和垂直居中的实现（附代码）
相关视频推荐：
1.CSS视频教程-玉女心经版
二：css如何设置div盒子容器（块状元素）垂直居中
1.使用绝对定位和负外边距对块级元素进行垂直居中 (已知元素的高度)
如果我们知道元素的高度，可以这样来实现垂直居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child{
width: 150px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
margin: -50px 0 0 0;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中</div>
</div>
</body>
</html>效果图：
这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。
2. 使用绝对定位和transform（未知元素高度）
如果我们不知道元素的高度，那么就需要先将元素定位到容器的中心位置，然后使用 transform 的 translate 属性，将元素的中心和父容器的中心重合，从而实现垂直居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child{
background: #93BC49;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中</div>
</div>
</body>
</html>效果图：
这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了，因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。
3. 绝对定位结合margin: auto
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child{
width: 200px;
height: 100px;
background: orange;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中...</div>
</div>
</body>
</html>效果图：
这种方法需要先 把要垂直居中的元素相对于父元素绝对定位，top和bottom设为相等的值，不管设置成多少值，只要两者相等就行；然后再将要居中元素的margin设为auto，这样便可以实现垂直居中了。被居中元素的宽高也可以不设置，但不设置的话就必须是图片这种自身就包含尺寸的元素，否则无法实现。
4. 使用padding实现子元素的垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
background: #ddd;
padding: 100px 0;
}
.child{
width: 200px;
height: 100px;
background: orange;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中了</div>
</div>
</body>
</html>效果图：
这种实现方式非常简单，就是给父元素设置相等的上下内边距，则子元素自然是垂直居中的，当然这时候父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确的垂直居中。这种方式看似没有什么技术含量，但其实在某些场景下也是非常好用的。
5. 使用flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
display: flex;
flex-direction: column;
justify-content: center;
}
.child{
width: 300px;
height: 100px;
background: #08BC67;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中了--弹性布局</div>
</div>
</body>
</html>效果图：
关于flex布局（弹性布局/伸缩布局）里门道颇多，这里先针对用到的东西简单说一下：
flex也就是flexible，意为灵活的、柔韧的、易弯曲的。
元素可以通过设置display:flex;将其指定为flex布局的容器，指定好了容器之后再为其添加align-items属性，该属性定义项目在交叉轴（这里是纵向轴）上的对齐方式，可能的取值有五个，分别如下：
flex-start:：交叉轴的起点对齐；
flex-end：交叉轴的终点对齐；
center：交叉轴的中点对齐；
baseline：项目第一行文字的基线对齐；
stretch（该值是默认值）：如果项目没有设置高度或者设为了auto，那么将占满整个容器的高度。
热心网友
时间：2022-04-28 13:09
水平居中
若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.
若是块级元素, 该元素设置 margin:0 auto即可.
若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:
.parent{width: -moz-fit-content;
width: -webkit-fit-content;
width:fit-content;
margin:0 auto;}
使用flex 布局, 可以轻松的实现水平居中, 子元素设置如下:
.son{display: flex;
justify-content: center;}
使用CSS3中新增的transform属性, 子元素设置如下:
.son{position:absolute;
left:50%;
transform:translate(-50%,0);}
使用绝对定位方式, 以及负值的margin-left, 子元素设置如下:
.son{position:absolute;
width:固定;
left:50%;
margin-left:-0.5宽度;}
使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:
.son{position:absolute;
width:固定;
left:0;
right:0;
margin:0 auto;}
垂直居中
若元素是单行文本, 则可设置 line-height 等于父元素高度
若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器*.
.parent::after, .son{display:inline-block;
vertical-align:middle;}.parent::after{
content:'';
height:100%;}
元素高度不定
可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
用 Flex 布局
.parent {display: flex;
align-items: center;}
可用 transform , 设置父元素相对定位(position:relative), 子元素如下css样式:
.son{position:absolute;
top:50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);}
元素高度固定
设置父元素相对定位(position:relative), 子元素如下css样式:
.son{position:absolute;
top:50%;
height:固定;
margin-top:-0.5高度;}
设置父元素相对定位(position:relative), 子元素如下css样式:
.son{position:absolute;
height:固定;
top:0;
bottom:0;
margin:auto 0;}
