css中盒子居中对齐的问题

最新推荐文章于 2022-05-31 12:57:57 发布

sdj_beyond

最新推荐文章于 2022-05-31 12:57:57 发布

阅读量3.8k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/weixin_38888773/article/details/81582968

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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实现，这种方式属于css3的方式。该方式用于在不知道居中盒子的高度或者宽度时。

<!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%);  x轴方向移动自身宽度的一半
            //transform: translateY(-50%);  y轴方向移动自身宽度的一半
		}
	</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>

sdj_beyond

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css中盒子居中对齐的问题

1.没有定位的盒子水平居中 1.让盒子的文字内容居中对齐: text-align: center 2.外边距实现盒子水平居中对齐，需要满足以下两个条件 *1.必须是块级元素* *2.盒子必须指定了宽度*width: 500px;margin:0 auto; (上下为0，左右auto)2.绝对定位的盒子居中对齐水平居中1.首先让盒子left:50%,...
复制链接

扫一扫