я знаю margin:0 auto; буде центром div горизонтальний, але я також хочу, щоб центр його вертикально, тому я використав це
vertical-align:middle;
top:50%;
transform:translate Y(-50%);
Але коли я запускаю цей код div в центрі вертикально, але це не "т центр по горизонталі.
Відповіді:
2 для відповіді № 1Щоб відцентрувати вертикально і горизонтально після спроби, спробуйте це:
// assumed positioned element
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Посиланняі ще одне добре ресурс.
2 для відповіді № 2
Flex став надзвичайно популярним, я б рекомендував це через його інших можливостей.
Скрипка: https://jsfiddle.net/ne38nx7t/1/
HTML:
<div class="Aligner">
<div class="Aligner-item">Apples</div>
</div>
CSS:
.Aligner {
height: 100px;
border: 2px solid blue;
display: flex;
align-items: center;
justify-content: center;
}
0 для відповіді № 3
Я не бачив весь ваш кодваш код на скрипці, до тих пір перевірте наступну скрипку, яку я створив, центризуйте вміст по горизонталі і вертикалі, де в змісті є динамічна висота
<html>
<head>
<style>
* { margin: 0; padding: 0; }
#page{display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/
#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/
*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/
html,body{height:100%;}
#page{height:100%;width:465px;}
</style>
</head>
<body>
<div id="page">
<div id="content_container">
<div id="content">
<p>your content</p>
</div>
</div>
</div>
</body>
</html>