堆栈内存溢出
  简体   繁体   English

CSS居中对齐div垂直

[英]CSS center align div vertically

 原文  2016-02-26 11:13:08  1   1    css

问题描述

I want to center align a div veritcally how can I do this?我想垂直居中对齐 div 我该怎么做？

<!DOCTYPE html>
<html>
<head>
    <title>HTML/CSS</title>
    <style type="text/css">
        #box {
            display: flex;
            width: 200px;
            height: 120px;
            background: red;
            margin: auto;
            vertical-align: center;
        }
    </style>
</head>
<body>
    <div id="box">Hello World!</div>
</body>
</html>

I referred to this tutorial but no gain.我参考了这个教程，但没有收获。

1 个解决方案

解决方案1
 0  2016-02-26 11:16:34

DEMO演示

It's all about the container一切都与容器有关

.container{

  display: flex;

  height: 100%;
  border: 1px solid red;
  justify-content: center;
  align-items: center;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 垂直对齐div的中心 - Align vertically center of the div 垂直居中/对齐图像 div 与 css 网格中的相邻文本 div - Vertically center/align image div with adjacent text div in css grid 如何使用CSS在div中垂直居中对齐图像？ - How do I use CSS to to vertically center align an image in a div? CSS如何垂直对齐菜单的居中div浮动元素？ - CSS how to align vertically center div floating elements of menu? 在div垂直居中对齐图像 - align image in a div vertically center 垂直居中对齐div - Center-align a div vertically 垂直居中对齐容器div - Vertically center align container div 如何将div垂直居中对齐？ - How to align div vertically in the center? 将div与第一个垂直居中的div对齐 - Align div with first vertically center div 在一个 div 内垂直居中对齐一个 div - Vertically center align a div within a div
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM