CSS定心技巧 [英] CSS centering tricks

问题描述

我最喜欢的方法只使用CSS中心一个xhtml元素如下：

My favorite equation for centering an xhtml element using only CSS is as follows:

display:block;
position:absolute;
width: _insert width here_;
left:50%;
margin-left: _insert width divided by two & multiplied by negative one here_

在支持它的浏览器中还有更简单的自动方法。有没有其他人有棘手的方法来强制内容显示在其容器中心？ （垂直居中的奖励点）

There's also the simpler margin:auto method in browsers that support it. Does anyone else have tricky ways to force content to display centered in its container? (bonus points for vertical centering)

编辑 - oops，忘记了左边距中的一个负部分。固定。

edit - oops, forgot the 'negative' part of one in the margin-left. fixed.

推荐答案

Stick with Margin：0 auto;水平对准;
如果你需要垂直对齐，使用position：absolute; top：50％; margin-top： - （width / 2）px;请注意，如果你的容器有比屏幕更宽的宽度，它的一部分将从屏幕左侧使用位置：绝对方法。

Stick with Margin: 0 auto; for horizontal alignment; If you need vertical alignment as well use position: absolute; top: 50%; margin-top: -(width/2)px; Be aware though, If your container has more width than your screen a part of it will fall off screen on the left side using the Position: absolute method.

这篇关于CSS定心技巧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！