本文翻译自:How to center an element horizontally and vertically
I am trying to center my tabs content vertically, but when I add the CSS style display:inline-flex
, the horizontal text-align disappears. 我试图将标签内容垂直居中,但是当我添加CSS样式display:inline-flex
,水平文本对齐会消失。
How can I make both text alignments x and y for each of my tabs? 如何为每个选项卡都使文本对齐x和y?
* { box-sizing: border-box; } #leftFrame { background-color: green; position: absolute; left: 0; right: 60%; top: 0; bottom: 0; } #leftFrame #tabs { background-color: red; position: absolute; top: 0; left: 0; right: 0; height: 25%; } #leftFrame #tabs div { border: 2px solid black; position: static; float: left; width: 50%; height: 100%; text-align: center; display: inline-flex; align-items: center; }
<div id=leftFrame> <div id=tabs> <div>first</div> <div>second</div> </div> </div>
#1楼
参考:https://stackoom.com/question/1JepV/如何将元素水平和垂直居中
#2楼
Approach 1 -
transform
translateX
/translateY
: 方法1-transform
translateX
/translateY
:Example Here / Full Screen Example 此处示例 / 全屏示例
In supported browsers (most of them), you can use
top: 50%
/left: 50%
in combination withtranslateX(-50%) translateY(-50%)
to dynamically vertically/horizontally center the element. 在受支持的浏览器 (大多数)中,您可以将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>
Approach 2 - Flexbox method: 方法2-Flexbox方法:
Example Here / Full Screen Example 此处示例 / 全屏示例
In supported browsers , set the
display
of the targeted element toflex
and usealign-items: center
for vertical centering andjustify-content: center
for horizontal centering. 在支持的浏览器中 ,将目标元素的display
设置为flex
并使用align-items: center
进行垂直居中,justify-content: center
进行水平居中。 Just don't forget to add vendor prefixes for additional browser support ( see example ). 只是不要忘记为其他浏览器支持添加供应商前缀( 请参阅示例 )。
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>
Approach 3 -
table-cell
/vertical-align: middle
: 方法3-table-cell
/vertical-align: middle
:Example Here / Full Screen Example 此处示例 / 全屏示例
In some cases, you will need to ensure that the
html
/body
element's height is set to100%
. 在某些情况下,您需要确保html
/body
元素的高度设置为100%
。For vertical alignment, set the parent element's
width
/height
to100%
and adddisplay: table
. 对于垂直对齐,将父元素的width
/height
为100%
然后添加display: table
。 Then for the child element, change thedisplay
totable-cell
and addvertical-align: middle
. 然后,对于子元素,将display
更改为table-cell
并添加vertical-align: middle
。For horizontal centering, you could either add
text-align: center
to center the text and any otherinline
children elements. 对于水平居中,可以添加text-align: center
以使文本和任何其他inline
子元素居中。 Alternatively, you could usemargin: 0 auto
, assuming the element isblock
level. 另外,您可以使用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>
Approach 4 - Absolutely positioned
50%
from the top with displacement: 方法4-绝对从顶部移至顶部50%
:Example Here / Full Screen Example 此处示例 / 全屏示例
This approach assumes that the text has a known height - in this instance,
18px
. 这种方法假定文本的高度已知-在这种情况下为18px
。 Just absolutely position the element50%
from the top, relative to the parent element. 相对于父元素,绝对将元素从顶部定位50%
。 Use a negativemargin-top
value that is half of the element's known height, in this case --9px
. 使用负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>
Approach 5 - The
line-height
method (Least flexible - not suggested): 方法5-line-height
方法(最不灵活-不建议):In some cases, the parent element will have a fixed height. 在某些情况下,父元素将具有固定的高度。 For vertical centering, all you have to do is set a
line-height
value on the child element equal to the fixed height of the parent element. 对于垂直居中,您要做的就是在子元素上将line-height
值设置为等于父元素的固定高度。Though this solution will work in some cases, it's worth noting that it won't work when there are multiple lines of text - like this . 尽管此解决方案在某些情况下可以使用,但值得注意的是,当有多行文本( 例如this)时,该解决方案将无法使用。
.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>
#3楼
If CSS3 is an option (or you have a fallback) you can use transform: 如果CSS3是一个选项(或者您有一个备用),则可以使用transform:
.center {
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
position: absolute;
}
Unlike the first approach above, you don't want to use left:50% with the negative translation because there's an overflow bug in IE9+. 与上面的第一种方法不同,您不想使用left:50%的否定翻译,因为IE9 +中存在溢出错误。 Utilize a positive right value and you won't see horizontal scrollbars. 使用正的正值,您将不会看到水平滚动条。
#4楼
Another approach is to use table: 另一种方法是使用表:
<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>
#5楼
The simplest and cleanest solution for me is using the CSS3 property "transform": 对我来说,最简单,最干净的解决方案是使用CSS3属性“ transform”:
.container { position: relative; } .container a { position: absolute; top: 50%; transform: translate(0,-50%); }
<div class="container"> <a href="#">Hello world!</a> </div>
#6楼
The best way to center a box both vertically and horizontally, is to use two containers : 垂直和水平放置框的最佳方法是使用两个容器:
The outher container : 外部容器:
- should have
display: table;
应该有display: table;
The inner container : 内部容器:
- should have
display: table-cell;
应该display: table-cell;
- should have
vertical-align: middle;
应该具有vertical-align: middle;
- should have
text-align: center;
应该具有text-align: center;
The content box : 内容框:
- should have
display: inline-block;
应该display: inline-block;
- should adjust the horizontal text-alignment, unless you want text to be centered 除非您希望文本居中,否则应调整水平文本对齐方式
Demo : 演示:
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>
See also this Fiddle ! 另请参阅此小提琴 !
Centering in the middle of the page: 在页面中间居中:
To center your content in the middle of your page, add the following to your outher container : 要将内容置于页面中间,请将以下内容添加到外部容器中:
-
position : absolute;
-
width: 100%;
-
height: 100%;
Here's a demo for that : 这是一个演示:
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>
See also this Fiddle ! 另请参阅此小提琴 !