如何实现水平，垂直，水平垂直居中

最新推荐文章于 2023-04-23 20:46:10 发布

Abudula__

最新推荐文章于 2023-04-23 20:46:10 发布

阅读量703

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/abudula__/article/details/104681829

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在写布局的时候我们常常会遇到要实现水平垂直居中，以下我简要的总结以下：

水平方向居中

先来个总结的思维导图

在这里插入图片描述

在这里插入图片描述
1.)是不是行级元素(像text link 等)
可以通过在父元素设置text-align:center来弄成水平居中。

这种办法对inline,inline-block,inline-table等元素都有效果.

2.)是不是块级元素
可以通过margin-left:auto和margin-right:auto来实现居中效果，这要求必须有宽度(要不然变成占整个行的宽度了).
代码和效果如下：
在这里插入图片描述

3.)是否是多余1个的块级元素
如果想要使2个或多个的块级元素变成水平居中有一下两个方法

变成inline-block元素，然后通过text-align的方式去实现
通过flex布局的justify-content来实现
如果是垂直排列可以通过margin:0 auto 来实现

<main class="inline-block-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

<main class="flex-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}

main div {
  background: black;
  color: white;
  padding: 15px;
  max-width: 125px;
  margin: 5px;
}

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}

.flex-center {
  display: flex;
  justify-content: center;
}

效果如下：
在这里插入图片描述

如果块级元素是垂直摆放的，也可以通过margin:0 auto来实现.

<main>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}

main div {
  background: black;
  margin: 0 auto;
  color: white;
  padding: 15px;
  margin: 5px auto;
}

main div:nth-child(1) {
  width: 200px;
}
main div:nth-child(2) {
  width: 400px;
}
main div:nth-child(3) {
  width: 125px;
}

效果如下：
在这里插入图片描述

垂直方向上居中

1.)是行内元素吗？
1.1)是单行元素吗？
有时候可以通过调整padding来实现垂直居中，我们可以设置padding-top,padding-bottom一样来实现垂直方向的居中

<main>
  <a href="#0">We're</a>
  <a href="#0">Centered</a>
  <a href="#0">Bits of</a>
  <a href="#0">Text</a>
</main>

body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  margin: 20px 0;
  padding: 50px;
}

main a {
  background: black;
  color: white;
  padding: 40px 30px;
  text-decoration: none;
}

效果如下：
在这里插入图片描述
如果padding不是一个选项的话，并且你知道不是换行的话，可以通过line-height来实现，当line-height 和 height一样高的时候，显得垂直居中。

<main>
  <div>
    I'm a centered line.
  </div>
</main>

body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  margin: 20px 0;
  padding: 40px;
}

main div {
  background: black;
  color: white;
  height: 100px;
  line-height: 100px;
  padding: 20px;
  width: 50%;
  white-space: nowrap;
}

效果如下：
在这里插入图片描述
1.2)是不是多行？

<div class="flex-center">
  <p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>

body {
  background: #f06d06;
  font-size: 80%;
}

div {
  background: white;
  width: 240px;
  margin: 20px;
}

.flex-center {
  background: black;
  color: white;
  border: 10px solid white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
  resize: vertical;
  overflow: auto;
}
.flex-center p {
  margin: 0;
  padding: 20px;
}

效果如下；
在这里插入图片描述

2.)是不是块级元素
2.1)是否知道高度
如果知道高度，可以首先通过top:50%来实现子元素上边距相对于父元素的50%，然后再通过margin-top:-50px(也就是子元素高度的一半)来实现子元素的垂直居中。
在这里插入图片描述
2.2)是否不知道高度
不知道具体高度的情况下，可以通过transform:translatey(-50%)来实现垂直方向的移动自己本身元素的一半高度.

2.3)能否可以使用flexbox

水平垂直居中

在这里插入图片描述
1.）不知道水平垂直居中的元素的宽度，高度
看以下一个例子：

<body>
		<div id="container">
			<div id="box">
				和我哦好烦阿里发货咖啡阿卡交话费哈佛好可怜发
			</div>
		</div>
	</body>

/* 通过transform来实现,当不知道宽度的时候 */
			#container{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				position: relative;
			}
			#box{
				width: 100px;
				border: 1px solid red;
				position: absolute;
				top:50%;
				left: 50%;
                 transform: translate(-50%,-50%);
			}

上面方法的关键是transform，因为我们不知道我们所要水平垂直居中的元素的大小，因此只能通过百分比来.

2.知道水平垂直居中元素的具体宽度和高度

<div id="container">
			<div id="box">
			</div>
</div>

/* 通过margin来实现 */
			/* #container{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				position: relative;
			}
			#box{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				position: absolute;
				top:50%;
				left: 50%;
				margin: -50px 0 0 -50px;
			} */

因为知道所要设置的元素的宽度和高度，因此可以通过使margin移动所宽度和高度的一半大小来实现.

3.可不可以使用flex-box

<div id="container">
			<div id="box">
				
			</div>
</div>

#container{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				display: flex;
				justify-content: center;
                align-items: center;
			}
			#box{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}

可以通过设置justify-content,align-items来实现我们的目标.

参考：点击链接

Abudula__

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
如何实现水平，垂直，水平垂直居中

在写布局的时候我们常常会遇到要实现水平垂直居中，以下我简要的总结以下：水平垂直居中1.）不知道水平垂直居中的元素的宽度，高度看以下一个例子：<body> <div id="container"> <div id="box"> 和我哦好烦阿里发货咖啡阿卡交话费哈佛好可怜发 </div> </div> &...
复制链接

扫一扫