Question

我正在尝试将浏览器窗口中的div放在全高度区域中，该窗口适用于Chrome和Firefox。它无法在Mac上的Safari和Tablet iPad上的Safari / Chrome中正确居中。看不出我错过了什么。

以下是该网站的链接：http://dev.whydidibother.com/osteria/2_2_2015/

我的css：

.welcome-note {
background: #ffffff;
width: 100%;
margin-left: auto;
margin-right: auto;
min-height: 100vh;
text-align: center;
position: relative;
}
.welcome-text {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
padding: 20px;
background: rgba(0,0,0,0.4);
padding: 60px !important;
color: #fff;
width: 75%;
}

任何想法的人？

Answer 1

您可以使用table方法来实现垂直对齐效果。我不建议使用transform。基本上你需要创建3 div一个display:table;和一个带有display：table-cell的子表，然后是第三个用来保存你的文本，如下所示。

<div id="vcenter">
    <div id="holder">
        <div id="content">
            <h3>Welcome to Osteria</h3>
            <p>Osteria is an award winning fine dining restaurant in the heart of North Berwick. With several awards under our belts we want to keep the standard up and hope for more. We are a small family restaurant cooking traditional Italian dishes for the Scottish market.</p>  
            <br/><p>Looking forward to seeing you very soon!</p>
        </div>
    </div>
</div>

CSS：

#vcenter {
    background-color: #fdface;
    text-align: center;
    position: absolute;
    top:0;
    bottom:0;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: visible;
    visibility: visible;
    display: table;   
}

#holder {
    font-family: Verdana, Geneva, Arial, sans-serif;
    min-height: 60px;
    visibility: visible;
    display: table-cell;
    vertical-align: middle; 
    text-align:center
}

#content{
    width: 75%;
    background: rgba(0,0,0,0.4);
    padding: 40px; 
    margin:0 auto;
    color: #fff;
}

Here是演示

我希望这会有所帮助：）

全高度部分并在浏览器中居中div

1 个答案: