小开

最佳答案

方法1 - transform translateX/translateY:

__abc0 / __abc1

在支持的浏览器(大多数)中，你可以使用top: 50%/left: 50%结合translateX(-50%) translateY(-50%)动态地将元素垂直/水平居中。

.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>

方法2 - Flexbox方法:

__abc0 / __abc1

在支持的浏览器中，将目标元素的display设置为flex，并使用align-items: center进行垂直居中，使用justify-content: center进行水平居中。只是不要忘记为额外的浏览器支持添加供应商前缀(看例子)。记住，父容器也需要高度(在本例中为100%)。

html, body, .container {
height: 100%;
}


.container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}

<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>

方法3 - table-cell/vertical-align: middle:

__abc0 / __abc1

在某些情况下，你需要确保html/body元素的高度被设置为100%。

对于垂直对齐，将父元素的width/height设置为100%并添加display: table。然后，对于子元素，将display更改为table-cell并添加vertical-align: middle。

对于水平居中，你可以添加text-align: center来居中文本和任何其他inline子元素。或者，你可以使用margin: 0 auto，假设元素是block级别。

html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}

<section class="parent">
<div class="child">I'm vertically/horizontally centered!</div>
</section>

方法4 -绝对定位50%从顶部位移:

__abc0 / __abc1

这种方法假定文本有一个已知的高度——在本例中为18px。只需要绝对地将元素50%放置在顶部，相对于父元素。使用负margin-top值，即元素已知高度的一半，在本例中为-9px。

html, body, .container {
height: 100%;
}


.container {
position: relative;
text-align: center;
}


.container > p {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
}

<div class="container">
<p>I'm vertically/horizontally centered!</p>
</div>

方法5 - line-height方法(最不灵活-不建议):

示例 .

在某些情况下，父元素将具有固定的高度。对于垂直居中，你所要做的就是在子元素上设置一个line-height值，等于父元素的固定高度。

虽然这个解决方案在某些情况下可以工作，但值得注意的是，当有多行文本- 像这样时，它将不起作用。

.parent {
height: 200px;
width: 400px;
background: lightgray;
text-align: center;
}


.parent > .child {
line-height: 200px;
}

<div class="parent">
<span class="child">I'm vertically/horizontally centered!</span>
</div>

小开

如果CSS3是一个选项(或者你有一个备用方案)，你可以使用transform:

.center {
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
position: absolute;
}

与上面的第一种方法不同，你不想使用left:50%和负平移，因为在IE9+中有一个溢出的bug。如果使用正的右值，就不会看到水平滚动条。

小开

另一种方法是使用表:

<div style="border:2px solid #8AC007; height:200px; width:200px;">
<table style="width:100%; height:100%">
<tr style="height:100%">
<td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
</tr>
</table>
</div>

小开

对我来说，最简单和最干净的解决方案是使用CSS3属性“transform”:

.container {
position: relative;
}


.container a {
position: absolute;
top: 50%;
transform: translate(0,-50%);
}

<div class="container">
<a href="#">Hello world!</a>
</div>

小开

将一个盒子垂直和水平居中的最好方法是使用两个容器:

外面的容器:

应该有display: table;

内容器:

应该有display: table-cell;
应该有vertical-align: middle;
应该有text-align: center;

内容框:

应该有display: inline-block;
应该调整水平文本对齐，除非你想让文本居中

演示:

body {
margin : 0;
}


.outer-container {
display: table;
width: 80%;
height: 120px;
background: #ccc;
}


.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}


.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}

<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>

另见< >强这个小提琴< / >强!

居中的:在书页中间居中的:

要将内容置于页面中央，请将以下内容添加到外部容器中:

position : absolute;
width: 100%;
height: 100%;

下面是一个演示:

body {
margin : 0;
}


.outer-container {
position : absolute;
display: table;
width: 100%;
height: 100%;
background: #ccc;
}


.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}


.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}

<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>

另见< >强这个小提琴< / >强!

小开

方法6

.

/*Change units to "%", "px" or whatever*/


#wrapper{
width: 50%;
height: 70vh;
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#left{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
background: red;
}
#right{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: green;
}
.txt{
text-align: center;
line-height: 50vh;
}

<div id="wrapper">
<div id="left" class="txt">Left</div>
<div id="right" class="txt">Right</div>
</div>

    .container{
width: 50%;  //Your container width here
height: 50%; //Your container height here
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

小开

将Div置于页面检查小提琴链接的居中

.

#vh {
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 200px;
height: 200px;
background: white;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

<div id="vh">Div to be aligned vertically</div>

Update Another option is to use flex box check the fiddle link

.vh {
background-color: #ddd;
height: 200px;
align-items: center;
display: flex;
}
.vh > div {
width: 100%;
text-align: center;
vertical-align: middle;
}

<div class="vh">
<div>Div to be aligned vertically</div>
</div>

小开

下面是获得理想结果的Flex-box方法

.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flex-box approach</title>
<style>
.tabs{
display: -webkit-flex;
display: flex;
width: 500px;
height: 250px;
background-color: grey;
margin: 0 auto;
    

}
.f{
width: 200px;
height: 200px;
margin: 20px;
background-color: yellow;
margin: 0 auto;
display: inline; /*for vertically aligning */
top: 9%;         /*for vertically aligning */
position: relative; /*for vertically aligning */
}
</style>
</head>
<body>


<div class="tabs">
<div class="f">first</div>
<div class="f">second</div>
</div>


</body>
</html>

小开

运行此代码片段并查看垂直和水平对齐的div。

html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}

<div class="container">
<div class="mydiv">h & v aligned</div>
</div>

小开

为了使元素垂直和水平居中，我们还可以使用下面提到的属性。

这个CSS属性aligns-items垂直地接受以下值:

flex-start:项目对齐到容器的顶部。

flex-end:项目与容器底部对齐。

中心:元素在容器的垂直中心对齐。

基线:项显示在容器的基线。

拉伸:项目被拉伸以适应容器。

这个CSS属性justify-content，用于水平对齐项目，并接受以下值:

flex-start:项目对齐到容器的左侧。

flex-end:项目对齐到容器的右侧。

中心:项目在容器的中心对齐。

之间的空间:项之间显示相等的间距。

空间:项目以等距显示。

小开

只要让上下左右都为0。

<html>
<head>
<style>
<div>
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}




</style>
</head>
<body>


<div> I am in the middle</div>


</body>
</html>

小开

    .align {
display: flex;
width: 400px;
height: 400px;
border: solid 1px black;
align-items: center;
justify-content: space-around;
}
.align div:first-child {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
.align div {
width: 20px;
height: 20px;
background-color: blue;
}

    <div class='align'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

第一个子将在中心垂直和水平对齐

小开

网格css方法

#wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.main {
background-color: #444;
}

<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box main"></div>
</div>

小开

你可以使用CSS(你的元素display:inline-grid + grid-auto-flow: row;) Grid和Flex Box(父元素display:flex;)来实现这一点，

参见下面的片段

#leftFrame {
display: flex;
height: 100vh;
width: 100%;
}


#tabs {
display: inline-grid;
grid-auto-flow: row;
grid-gap: 24px;
justify-items: center;
margin: auto;
}


html,body {
margin:0;
padding:0;
}

<div>
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
</div>

小开

这应该可以

.center-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}

<div class="center-div">Center Div</div>

小开

使div在垂直和水平方向居中最简单的方法如下:

<div style="display: table; width: 200px; height: 200px; border: 1px solid black;">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
Text Here
</div>
</div>

再举一个例子:

.parent {
display: table;
width: 100%;
height: 100%;
}


.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}




<div class="parent">
<div class="child">
<h4><u>SERVICE IN BANGLADESH FLEET RESERVE <br> AND <br> RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE</u></h4>
</div>
</div>

小开

源链接

1)显示式伸缩

.child-element{
display: flex;
justify-content: center;
align-items: center;
}

方法2)二维变换

.child-element {
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
position: absolute;
}

参见其他方法在这里

小开

下面是如何使用两个简单的flexbox属性在两个轴上居中n div:

设置容器的高度:在这里，主体被设置为至少100个视口高度。
align-items: center;将垂直居中块，如果伸缩方向是行，否则水平，如果伸缩方向是列
justify-content: space-around;将垂直分配自由空间，如果弯曲方向是row，如果弯曲方向是div元素周围的column

body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
}

<div>foo</div>
<div>bar</div>

小开

这是一个相关的问题，人们可能会在搜索这个页面时:当我想要居中一个div为“等待”..100px方形动画gif，我使用:

.centreDiv {
position: absolute;
top:     -moz-calc(50vh - 50px);
top:  -webkit-calc(50vh - 50px);
top:          calc(50vh - 50px);
left:    -moz-calc(50vw - 50px);
left: -webkit-calc(50vw - 50px);
left:         calc(50vw - 50px);
z-index: 1000; /* whatever is required */
}

小开

如果你喜欢它没有 flexbox，网格，表或vertical-align: middle;

你可以:

超文本标记语言 < br >

<div class="box">
<h2 class="box__label">square</h2>
</div>

CSS

.box {
box-sizing: border-box;
width: 100px;
height: 100px;
text-align: center;
border: 1px solid black;
}


.box__label {
box-sizing: border-box;
display: inline-block;
transform: translateY(50%);
text-align: center;
border: 1px solid black;
}

小开

需要遵循以下新和简单解决方案:

  .centered-class {
align-items: center;
display: flex;
justify-content: center;
width: 100vw;
height: 100vh;
}

<div class="centered-class">
I'm in center vertically and horizontally.
</div>

小开

最简单的`flexbox`方法:

使单一的元素垂直和水平居中的最简单方法是使其成为一个伸缩项，并将其边距设置为auto:

如果对伸缩项应用自动边距，该项将自动扩展其指定的边距，以占用flex中的额外空间容器…< / p >

.flex-container {
height: 150px;
display: flex;
}


.flex-item {
margin: auto;
}

<div class="flex-container">
<div class="flex-item">
This should be centered!
</div>
</div>

这种在每个方向上的边距扩展将推元素精确地定位到其容器的中间位置。

小开

`CSS Grid: place-items`

最后，我们为CSS Grid设置了place-items: center以使它更容易。

超文本标记语言

<div class="parent">
<div class="to-center"></div>
</div>

CSS

.parent {
display: grid;
place-items: center;
}

输出:

html,
body {
height: 100%;
}


.container {
display: grid;
place-items: center;
height: 100%;
}


.center {
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
padding: 10px;
}

<div class="container">
<div class="center" contenteditable>I am always super centered within my parent</div>
</div>

小开

我使用这个CSS代码:

display: grid;
justify-content: center;
align-items: center;

源是css技巧

小开

在这种情况下，我试图在button::before和button::after中垂直对齐文本内容，我能够使用vertical-align: text-top让它工作。

button::after {
vertical-align: text-top;
}

小开

如果是只有文本对齐，就很简单。就用这个吧:

vertical-align: middle; /* vertical centering*/
text-align: center; /* horizontal centering*/

不需要父样式。

在某些情况下，当父类有一些样式属性时，它可能会影响子类，这将无法正常工作。

如何水平和垂直居中一个元素

方法2 - Flexbox方法:

外面的容器:

内容器:

内容框:

演示:

居中的:在书页中间居中的:

最简单的flexbox方法:

CSS Grid: place-items

最简单的`flexbox`方法:

`CSS Grid: place-items`