Вертикально центрирующий текст в ответном виде

Question

Продвигался личный проект веб-дизайна, но я продолжаю застревать при вертикальном центрировании тега p внутри section.

https://jsfiddle.net/dowp4rv3/1/

Я хочу, чтобы текст внутри этого раздела, чтобы быть в центре по вертикали, но я не хочу терять чувствительность. Я пробовал ряд возможных решений, но я все время вникаю в это. Кто-нибудь из ваших экспертов видит быстрое решение?

HTML

<div class="box"> 
    <section> 
    <p>Some text</p> 
    </section> 
</div> 

CSS

body { 
    background-color: white; 
    margin: 0; 
    overflow: auto; 
} 

.box { 
    display: block; 
    float: left; 
    height: 100vh; 
    width: 100vw; 
    background-color: green; 
    position: relative; 
} 

.box section { 
    display: block; 
    text-align: center; 
    height: 20%; 
    width: 70%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    border: solid .2em white; 
} 

.box section p { 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    position: absolute; 
} 


} 

} 

Там определенно лишняя CSS там (частично из-за артефакты из проекта, который я взял это из), но проблемы у меня канистра быть увиденным.

Answer 1

Вот хороший ресурс на центрирующих вещи - https://www.w3.org/Style/Examples/007/center.en.html

Используя существующий CSS, вы можете применить top: 50%; transform: translateY(-50%); на p элемента к центру вертикально.

body { 
 
    background-color: white; 
 
    margin: 0; 
 
    overflow: auto; 
 
} 
 

 
.box { 
 
    display: block; 
 
    float: left; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background-color: green; 
 
    position: relative; 
 
} 
 

 
.box section { 
 
    display: block; 
 
    text-align: center; 
 
    height: 20%; 
 
    width: 70%; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    border: solid .2em white; 
 
} 
 

 
.box section p { 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    transform: translateY(-50%); 
 
    margin: 0; 
 
    position: absolute; 
 
}

<div class="box"> 
 
    <section> 
 
    <p>Some text</p> 
 
    </section> 
 
</div>

Вы также можете использовать display: flex; justify-content: center; align-items: center; на родителя p «s центрировать p по горизонтали и по вертикали

body { 
 
    background-color: white; 
 
    margin: 0; 
 
    overflow: auto; 
 
} 
 

 
.box { 
 
    display: block; 
 
    float: left; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background-color: green; 
 
    position: relative; 
 
} 
 

 
.box section { 
 
    display: block; 
 
    text-align: center; 
 
    height: 20%; 
 
    width: 70%; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    border: solid .2em white; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.box section p { 
 
    margin: 0; 
 
}

<div class="box"> 
 
    <section> 
 
    <p>Some text</p> 
 
    </section> 
 
</div>

Answer 2

Вы можете сделать section FLE Xbox контейнер со следующими параметрами (что делает все настройки для включенного p тега избыточного):

.box section { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 20%; 
    width: 70%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    border: solid .2em white; 
} 

полное решения см здесь: https://jsfiddle.net/7ag8jqtu/