Question

HTML：

<div class="container">
   <div class="1"></div>
   <div class="2"></div>
</div>

CSS：

.container{
            width:100%;
        height:351px;
        border:1px solid;
          }
.1{
position:absolute;
width:auto;/*----flexible div--*/
height:351px;
margin:0 auto;
display:block;
cursor:pointer;
  }

.2{
    position:relative;
width:200px;/*---fixed width--*/
margin:0 auto;
/*verti cent*/
margin-top:20% !important;
/*----------*/
padding:8px 0px;
background-color:#212121;
color:whitesmoke;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:500;
text-align:center;
cursor:pointer;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
   }

上面的代码声明有一个带有两个子div的容器div。容器div的宽度为100％。内部的两个div位于另一个的顶部。

我的问题：div2水平居中，因为它有一个固定的宽度，但div1不能给定一个固定的div，因为它需要灵活。

Answer 1

首先：只有数字的类名无效。

第二：你可以使用两种解决方案来集中一个元素。

解决方案1：元素是一个块元素，具有宽度和水平自动边距，如：

.myElement {
    display: block;
    width: 300px;
    margin: 0 auto 0 auto;
}

解决方案2：元素是绝对的或固定的，具有特殊的宽度：

.myElement {
    position: absolute;
    width: 300px;
    left: 50%;
    margin: 0 0 0 -150px;
 }

Answer 2

您可以尝试使用翻译技巧实现这一目标：

.one {
    position: absolute;
    left: 50%;
    width: auto;
    height: 100%;
    display: block;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

支持：IE9 +。

我还更改了类名，因为数字无效。

演示：http://jsfiddle.net/77Rac/

Answer 3

我修改了上面的一点以获得所需的输出。给出了html和css，并给出了jsfiddle链接。

HTML

<div class="container">
   <div class="1">fds</div>
   <div class="2">ffd</div>
</div>

CSS

.container{
            width:100%;
        height:351px;
        border:1px solid;
    text-align:center ;
          }
.1{
position:absolute;
width:auto;/*----flexible div--*/
height:351px;
margin:0 auto;
display:block;
cursor:pointer;

  }

.2{
    position:relative;
width:200px;/*---fixed width--*/
margin:0 auto;
/*verti cent*/
margin-top:20% !important;
/*----------*/
padding:8px 0px;
background-color:#212121;
color:whitesmoke;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:500;
text-align:center;
cursor:pointer;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
   }

http://jsfiddle.net/6j7CX/

如何使div水平居中

3 个答案:

演示：http://jsfiddle.net/77Rac/