0

我想将 div 对齐到中心。

像这样

在此处输入图像描述

我试过margin-top，vertical-align

但它们也不起作用。

我也设置了左边小于0px

但内部 div 仍然是左边的 0px

如果我想要上图的 div

如何修改css使其如上图？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div
{
    border:solid;
}
#outer
{
    position:absolute;
    height:100px;
    width:50px;
    left:50px;
    top:50px;
}
#inner
{
    background:white;
    height:20%;
    width:120%;
    left:-10px;
    margin-top:auto;
    margin-buttom:auto;
    vertical-align:middle;
}
</style>
</head>
<body>

<div id="outer">
    <div id="inner">abc</div>
</div>
</body>
</html>
4

4 回答 4

3

试试这个 - http://jsfiddle.net/vn6Wx/

#inner
{
    background:white;
    height:40%;
    width:200%;
    position: relative;
    left:-50%;
    top: 25%;
    margin-top:auto;
    margin-buttom:auto;
    vertical-align:middle;
}
于 2012-06-15T18:34:17.657 回答
1

在不使用 JavaScript 的情况下垂直对齐元素的唯一灵活方法是将其放入表格单元格中。

于 2012-06-15T18:59:53.940 回答
0

检查这个..

http://jsfiddle.net/dmvcs/

#outer{
  position:absolute;
  height:100px;
  width:50px;
  left:50px;
  top:50px;
  border:2px solid red;
}

#inner{
  background:white;
  position:absolute;
  height:50px;
  width:100px;
  top:50%;
  left:50%;
  margin-top:-25px;
  margin-left:-50px;
  border:2px solid green;
}​
于 2012-06-15T18:36:49.653 回答
0

你可以试试这个：

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            html { height:100%; width:100%; }
            body { background-color: yellow; margin:0; padding:0; }
            #outer { width:100%; min-height:100%; background-color:red; position:absolute; }
            #inner { width:500px; height:500px; background-color:blue; position:relative; margin:10% auto; }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
            </div>
        </div>
    </body>
</html>

祝你好运！

于 2012-06-15T19:31:40.183 回答