コンテンツを縦と横の中央に配置したいが、水平にのみセンタリングする。問題は、高さが固定されていないことです。 皆さん、助けてくれてありがとう！固定高さなしにDIVを水平および垂直にセンタリングする
html,
body {
height: 100% margin: 0;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
text-align: center;
}<div class="content">
<h1>Welcome to the website!</h1>
</div>このコードを実行します。
body{
margin: 0;
padding: 0;
}
.content-wrapper{
background-color: #121212;
display: block;
left: 0;
height: 100%;
padding: 15px;
position: fixed;
top: 0;
width: 100%;
}
.content{
background-color: #f5f5f5;
display: table;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
.centent-cell{
display: table-cell;
height: 100%;
vertical-align: middle;
width: 100%;
}
h1{
color: #121212;
}<div class="content-wrapper">
<div class="content">
<div class="centent-cell">
<h1>Welcome to the website!</h1>
</div>
</div>
</div>簡単に（親position: relative;を有していると仮定して）、このように親に要素に対してセンタリングすることができます。あなたの例では
：
h1 {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
また、代わりにposition: fixed;を使用して、画面の真ん中にそれを中央にすることができます。ここで
はあなたが必要なものの例です：
<section>
<div class="centerize">
<div class="v-center">
<div class="box">Say my name!</div>
</div>
</div>
</section>
とCSS
section {
height: 100vh;
background: #fff;
}
.centerize {
display: table;
height: 100%;
width: 100%;
}
.v-center {
display: table-cell;
vertical-align: middle
}
.box {
background: #000;
width: 10%;
margin: 0 auto;
}
このコードを実行します
HTML
<body >
<div class="content">
<h1>Welcome to the website!</h1>
</div>
</body>
CSS
html,body {
height : 100%;
width : 100%;
}
.content {
height : 100%;
width : 100%;
display: table;
}
h1 {
text-align: center;
display: table-cell;
vertical-align: middle;
}
ここであなたのhtmlは –
このスレッドでは答えが見つからないと肯定的ですか？http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-すべてのブラウザ？ – Turnip
ありがとう、解決策を見つけました！ – Daniel