Css 如何使div垂直和水平居中_Css

Css 如何使div垂直和水平居中

css

Css 如何使div垂直和水平居中,css,Css,我想垂直和水平居中的文字“苹果”。我尝试了所有已经提出的解决方案（内分区、垂直对齐、边距：自动…）我就是不明白我认为问题就在下面 #distance { height:20%; text-align: center; vertical-align: middle; font-size: 2em; } 谢谢。这应该可以： #distance { height:20%; text-align: center; margin-top: 10%; f

我想垂直和水平居中的文字“苹果”。我尝试了所有已经提出的解决方案（内分区、垂直对齐、边距：自动…）我就是不明白

我认为问题就在下面

#distance
{
 height:20%; 
 text-align: center;
 vertical-align: middle;
 font-size: 2em;
}

谢谢。

这应该可以：

#distance
{
    height:20%; 
    text-align: center;
    margin-top: 10%;
    font-size: 2em;
}

JSFIDLE-or 你需要一个额外的

div

来扭曲你的

div#distance

标签

HTML:

<body>
    <div id="leftSide">
        <p>orange</p>
    </div>
    <div id="rightSide">
        <div class="div-p">
            <div id="distance">apple</div>
        </div>
        <div id="googleMap"></div>
    </div>
</body>

html, body {
    margin:0;
    padding:0;
    height:100%
}
.div-p {
    height: 20%;
    text-align: center;
    font-size: 2em;
    display: table;
    width: 100%;
}
body {
    width:100%;
    margin:0;
    display:table;
    border-collapse:collapse;
    table-layout:fixed;
}
#leftSide {
    display:table-cell;
    vertical-align:middle;
    width:2em;
    font-size:4em;
    padding:0;
    overflow:hidden;
    background-image: url('eiffeltower.jpg');
}
#leftSide p {
    display:table;
    text-indent:1.75em;
    white-space:nowrap;
    transform:rotate(-90deg) translate(-50%, 0);
    transform-origin:1em center;
}
#rightSide {
    height: 100%;
    margin:0;
    padding:0;
}
#distance {
    display: table-cell;
    vertical-align: middle;
}
#googleMap {
    height:80%;
    background-color: yellow;
}

它不工作，高度将超过100，将出现一个滚动条，我不想这样做。：）谢谢你。我试着做一些类似的事情，但没有成功。另外，看看这个问题已经讨论了好几次了，所以有一些答案，其中至少有一个可以满足你的需要。但是，我将在行动中向您展示：