cssdiv居中对齐_如何使⽤CSS将所有内容居中-对齐Div，⽂本
等
css div居中对齐
Centering things is one of the most difficult aspects of CSS.
使事物居中是CSS最困难的⽅⾯之⼀。
The methods themselves usually aren't difficult to understand. Instead, it's more due to the fact that there are so many ways to center things.
这些⽅法本⾝通常并不难理解。 取⽽代之的是，更多的原因是有很多⽅法可以使事物居中。
The method you use can vary depending on the HTML element you're trying to center, or whether you're centering it horizontally or vertically.
您使⽤的⽅法可能会有所不同，具体取决于您尝试居中HTML元素，还是将其⽔平或垂直居中。
In this tutorial, we'll go over how to center different elements horizontally, vertically, and both vertically a
nd horizontally.
在本教程中，我们将介绍如何在⽔平，垂直以及垂直和⽔平⽅向上将不同元素居中。
如何⽔平居中 (How to Center Horizontally)
Centering elements horizontally is generally easier than vertically centering them. Here are some common elements you
may want to center horizontally and different ways to do it.
⽔平居中通常⽐垂直居中更容易。 这是您可能需要⽔平居中的⼀些常见元素以及不同的处理⽅式。
如何使⽤CSS Text-Align Center属性将⽂本居中 (How to Center Text with the CSS Text-Align Center Property)
To center text or links horizontally, just use the text-align property with the value center:
要将⽂本或链接⽔平居中，只需将text-align属性与值center ：
1<div class="container">
2  <p>Hello, (centered) World!</p>
3</div>
1p {
2  text-align: center;
3}
Hello, (centered) World!
您好，(居中)世界！
如何使⽤CSS Margin Auto将Div居中 (How to Center a Div with CSS Margin Auto)
Use the shorthand margin property with the value 0 auto to center block-level elements like a div horizontally:
将速记页margin属性的值设置为0 auto可以将像div这样的块级元素⽔平居中：
1<div class="container">
2  <div class="child"></div>
3</div>
1.child {
2  ...
3  margin: 0 auto;
4}
如何使⽤Flexbox将Div⽔平居中 (How to Center a Div Horizontally with Flexbox)
Flexbox is the most modern way to center things on the page, and makes designing responsive layouts much easier than it used to be. However, it's not fully supported in some legacy browsers like Internet Explorer.
Flexbox是最现代的在页⾯上居中放置内容的⽅法，它使响应式布局的设计⽐以前容易得多。 但是，某些旧版浏览器(例如Internet Explorer)未完全⽀持它。
To center an element horizontally with Flexbox, just apply display: flex and justify-content: center to the parent element:
要使⽤Flexbox将元素⽔平居中，只需应⽤display: flex和justify-content: center于⽗元素：
1<div class="container">
2  <div class="child"></div>
3</div>
2  ...
3  display: flex;
4  justify-content: center;
5}
如何垂直居中 (How to Center Vertically)
Centering elements vertically without modern methods like Flexbox can be a real chore. Here we'll go over some of the older methods to center things vertically first, then show you how to do it with Flexbox.
在没有诸如Flexbox之类的现代⽅法的情况下，垂直居中放置元素是⼀件很繁琐的事情。 在这⾥，我们将介绍⼀些较旧的⽅法，以⾸先将内容垂直居中，然后向您展⽰如何使⽤Flexbox。
如何使⽤CSS绝对位置和负边距在Div垂直居中 (How to Center a Div Vertically with CSS Absolute Positioning and Negative Margins)
For a long time this was the go-to way to center things vertically. For this method you must know the height of the element you want to center.
长期以来，这是垂直放置事物居中的⽅法。 对于此⽅法，您必须知道要居中的元素的⾼度。
First, set the display property of the parent element to relative.
⾸先，将⽗元素的display属性设置为relative 。
Then for the child element, set the display property to absolute and top to 50%:
然后，对于⼦元素，将display属性设置为absolute ， top为50% ：
1<div class="container">
2  <div class="child"></div>
3</div>
5
6.child {
7  width: 50px;
8  height: 50px;
9  background-color: red;
10  /* Center vertically */
11  position: absolute;
12  top: 50%;
13}
But that really just vertically centers the top edge of the child element.
但这实际上只是使⼦元素的顶部边缘垂直居中。
To truly center the child element, set the margin-top property to -(half the child element's height):
要使⼦元素真正居中，请将margin-top属性设置为-(half the child element's height) ：
2  ...
3  position: relative;
4}
5
6.child {
7  width: 50px;
8  height: 50px;
9  background-color: red;
10  /* Center vertically */
11  position: absolute;
12  top: 50%;
13  margin-top: -25px; /* half this element's height */
14}
如何使⽤转换和平移垂直居中Div (How to Center a Div Vertically with Transform and Translate)
If you don't know the height of the element you want to center (or even if you do), this method is a nifty trick.
如果您不知道要居中的元素的⾼度(或者即使您知道)，则此⽅法很不错。
This method is very similar to the negative margins method above. Set the display property of the parent element to relative.
此⽅法与上⾯的负边距⽅法⾮常相似。 将⽗元素的display属性设置为relative 。
For the child element, set the display property to absolute and set top to 50%. Now instead of using a negative margin to truly center the child element, just use transform: translate(0, -50%):
对于⼦元素，将display属性设置为absolute ，并将top设置为50% 。 现在，不要使⽤负边距来真正使⼦元素居中，⽽只需使⽤transform: translate(0, -50%) ：
1<div class="container">
2  <div class="child"></div>
3</div>
5
6.child {
7  ...
8  position: absolute;
9  top: 50%;
10  transform: translate(0, -50%);
11}
css设置文字垂直居中Note that translate(0, -50%) is shorthand for translateX(0) and translateY(-50%). You could also write transform: translateY(-50%) to center the child element vertically.
请注意， translate(0, -50%)是translateX(0)和translateY(-50%)简写。 您还可以编写以下transform: translateY(-50%)以使⼦元素垂直居中。
如何使⽤Flexbox将Div垂直居中 (How to Center a Div Vertically with Flexbox)
Like centering things horizontally, Flexbox makes it super easy to center things vertically.
就像⽔平居中对齐⼀样，Flexbox使垂直居中对齐变得⾮常容易。
To center an element vertically, apply display: flex and align-items: center to the parent element:
要将元素垂直居中，请应⽤display: flex和align-items: center于⽗元素：
1<div class="container">
2  <div class="child"></div>
3</div>
2  ...
3  display: flex;
4  align-items: center;
5}
如何在垂直和⽔平⽅向上居中 (How to Center Both Vertically and Horizontally)
如何使⽤CSS绝对位置和负边距将Div垂直和⽔平居中 (How to Center a Div Vertically and Horizontally with CSS Absolute Positioning and Negative Margins)
This is very similar to the method above to center an element vertically. Like last time, you must know the width and height of the element you want to center.
这与上⾯将元素垂直居中的⽅法⾮常相似。 与上次⼀样，您必须知道要居中的元素的宽度和⾼度。
Set the display property of the parent element to relative.
将⽗元素的display属性设置为relative 。
Then set the child's display property to absolute, top to 50%, and left to 50%. This just centers the top left corner of the child element vertically and horizontally.
然后将⼦级的display属性设置为absolute ， top为50% ，⽽left为50% 。 这只是将⼦元素的左上⾓垂直和⽔平居中。
To truly center the child element, apply a negative top margin set to half the child element's height, and a negative left margin set to half the child element's width:
要使⼦元素真正居中，请应⽤负的上边距设置为⼦元素⾼度的⼀半，并使⽤负的左边距设置为⼦元素宽度的⼀半：
1<div class="container">
2  <div class="child"></div>
3</div>
2  ...
3  position: relative;
4}
5
6.child {
7  width: 50px;
8  height: 50px;
9  background-color: red;
10  /* Center vertically and horizontally */
11  position: absolute;
12  top: 50%;
13  left: 50%;
14  margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */
15}
如何使⽤Transform和Translate将Div垂直和⽔平居中 (How to Center a Div Vertically and Horizontally with Transform and Translate)
Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.
如果您不知道元素的确切尺⼨并且⽆法使⽤Flexbox，请使⽤此⽅法将元素垂直和⽔平居中。
First, set the display property of the parent element to relative.
⾸先，将⽗元素的display属性设置为relative 。
Next, set the child element's display property to absolute, top to 50%, and left to 50%.
接下来，⼦元素的设置display属性为absolute ， top⾄50%并left到50%
Finally, use transform: translate(-50%, -50%) to truly center the child element:
最后，使⽤transform: translate(-50%, -50%)真正使⼦元素居中：
1<div class="container">
2  <div class="child"></div>
3</div>
2  ...
3  position: relative;
4}
5
6.child {
7  ...
8  position: absolute;
9  top: 50%;
10  left: 50%;
11  transform: translate(-50%, -50%);
12}
如何使⽤Flexbox将Div垂直和⽔平居中 (How to Center a Div Vertically and Horizontally with Flexbox)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。