css -- 水平和垂直居中的一些笔记

程序员文章站 2022-03-10 20:14:33

...

这些日子一直恶补css，感觉居中是个很重要的东西，网上说了很多方法，在这里记录一下，而且在实验过程中也发现有的人说的方法根本做不到，所以还是要自己亲自测试，不能只背别人的东西。以下的方法都在 chrome 68.0.3440.106（正式版本）经过测试。

css -- 水平和垂直居中的一些笔记

以下为代码 ===》》》

水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <h1>子元素为行内元素，对父元素设置 text-align:center</h1>
    <div style=" text-align:center; height: 300px; background-color: coral">
        <span>span</span>
    </div>

    <h1>子元素为定宽块状元素</h1>
    <div style="height: 200px; background-color: #ff5a98">
        <div style="width: 200px; background-color: aqua; margin: auto; height: 200px"></div>
    </div>

    <h1>子元素为不定宽块状元素，子元素设置display:inline，父元素设置text-align:center</h1>
    <div style="text-align: center">
        <ul style="display: inline">
            <li>11111111111</li>
            <li>22222222222</li>
            <li>3</li>
        </ul>
    </div>

    <h1>通用方案：flex布局，父元素设置{display:flex; justify-content: center}</h1>
    <div style="display: flex; justify-content: center">
        <div>这是div</div>
       <span>这是span</span>
        <ul>
            <li>11111111111</li>
            <li>22222222222</li>
            <li>33333333333</li>
        </ul>
    </div>
</body>
</html>

垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
</head>
<body>
<h1>父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height</h1>
<div style="height: 50px; line-height: 50px;background-color: burlywood">
    <span>11111111</span>
</div>

<h1>父元素一定，子元素为多行内联文本：设置父元素的display:table-cell，再设置vertical-align:middle</h1>
<div style="height: 300px;background-color: aqua;display: table-cell;vertical-align: middle">
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium adipisci dicta dolores dolorum ea et fugiat,
         harum id illo incidunt laudantium maiores nihil odio perspiciatis possimus, quam sapiente veniam! Lorem ipsum dolor sit amet,
         consectetur adipisicing elit. Ad, architecto, aspernatur cupiditate ducimus ea error magnam molestiae nemo nisi optio perspiciatis placeat porro,
         recusandae repellat tempore totam voluptate. Explicabo, recusandae!</span>
</div>

<h1>块状元素，设置子元素position:absolute)，然后设置margin-top: -1/2 height</h1>
<div style="height: 200px;background-color: #ff5a98;position: relative">
    <div style="position: absolute;margin-top: -50px;height: 100px;width:150px;top: 50%;background-color: chartreuse"></div>
</div>

<h1>通用方案，flex布局，父元素设置{display:flex; align-items:center}</h1>
<div style="display: flex;align-items: center;background-color: burlywood">
    <div>div</div>
    <span>span</span>
    <ul>
        <li>li1</li>
        <li>li2</li>
    </ul>
</div>
</body>
</html>

css -- 水平和垂直居中的一些笔记

关于html水平垂直居中的一些总结吧_html/css_WEB-ITnose

CSS垂直水平居中，display:flex，布局，文字属性的一些零碎

div+css水平和垂直居中的实现方案

【CSS】不知道图片大小的时候，使用position进行水平和垂直居中

CSS篇-面试题2-如何让一个长度未知的图片水平和垂直方向均居中

css遇到的垂直水平居中（个人学习笔记）_html/css_WEB-ITnose

【笔记】让DIV水平垂直居中的两种方法_html/css_WEB-ITnose

HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中_html/css_WEB-ITnose

css遇到的垂直水平居中（个人学习笔记）_html/css_WEB-ITnose

CSS水平和垂直居中的实现