HTML/CSS常见的三种水平居中方式

时间 2020-05-21

标签 html css 常见的三种水平居中方式栏目 HTML 繁體版

原文原文链接

2019-10-31 15:55:56css

一丶第一种居中方式html

在css中使用text-align和display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第一种居中方式</title>
    <style> .parent{ background: darkgray; text-align: center;
        } .child{ width: 200px; height: 200px; background: darkred; display: inline-block;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

效果：

　　　　text-align的属性值通常经常使用的三种：浏览器

　　　　　　1.left　　左对齐布局

　　　　　　2.right　右对齐学习

　　　　　　3.center 居中对齐ui

　　　　这里将其父div设置对齐方式为center，若是不给子级div加display属性时，子级div并不会居中，居中的将会是子级div的文本和父级div的文本，若是要将子级div居中就须要设置其display:inline-block；spa

　　　　display的属性值通常经常使用的三种：3d

　　　　　　1.inline　　内联　　　　　　（text-align属性有效）rest

　　　　　　2.block　　块级　　　　　　code

　　　　　　3.inline-block 内联+块级　　（text-align属性有效）　

　　　　* 当子级div的display设置成inline属性时，子级div的宽度和高度将会失效，但div能够实现居中效果，只是宽度和高度将没法设置

　　　　* 当子级div的display属性设置成inline-block属性时，子级div的宽度和高度有效，通常经常使用这个属性，若是不给div设置display属性时，将会默认是block块级元素

　　　　注意：text-align属性具备继承性，也就是说当父级设置了这个属性时，其全部子级(无论多少层子级标签)的文本内容将会默认是你所设置的对齐方式，看下面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第一种居中方式</title>
    <style> .parent{ background: darkgray; text-align: center;
        } .child{ width: 200px; height: 200px; background: darkred; display: inline-block;
        } .test{ width: 150px; background: forestgreen;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
            <div class="test">这是居中的文本</div>
        </div>
    </div>
</body>
</html>

　　　　效果：

　　　　这种居中方式的优缺点

　　　　　　优势：浏览器兼容性比较好，由于text-align和inline-block这两个属性是CSS2支持的，因此在老版本的浏览器中一样能够运行

　　　　　　缺点：text-align属性具备继承性，使用它将会致使子标签的文本也是居中的，若是要解决这个问题就须要在其子标签中从新设置text-align属性，可是设置后，该标签的子标签一样会继承上一级的text-align　　　　

　　　　　使用这种居中方式颇有可能会每一个子级标签从新设置text-align属性。

二丶第二种居中方式

在CSS中使用display和margin属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第二种居中方式</title>
    <style> .parent{ background: gray;
        } .child{ width: 200px; height: 200px; background: indigo; display: table; margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 父级标签 -->
    <div class="parent">
        <!-- 子级标签-->
        <div class="child"></div>
    </div>
</body>
</html>

效果

　　margin属性时外边距，共有4个属性值

　　　　若是设置一个值：上右下左

　　　　若是设置两个值：上下 - 左右

　　　　若是设置三个值：上 - 左右 - 下

　　　　若是设置四个值：上 - 右 - 下 - 左

　　而这里能够不用设置display属性，一样也有居中效果，可是设置display属性时不能设置为inline属性值，不然居中一样会失效。

　　这种居中方式的优缺点

　　　　优势：只需对子级标签进行设置就能够实现居中效果

　　　　缺点：若是子级标签脱离文档流，将会致使margin属性值失效

　　　　　　脱离文档流的几个属性：

　　　　　　　　　　1.float浮动属性会致使脱离文档流

　　　　　　　　　　2.position属性值设置成absolute（绝对定位）

　　　　　　　　　　3.position属性值设置成fixed的（固定定位）

　　　　　　子级标签设置了这几个属性值时，将会脱离文档流致使margin属性值失效

三丶第三种居中方式

在CSS中使用position和transform属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第三种居中方式</title>
    <style> .parent{ width: 500px; height: 200px; position: relative; background: #000;
        } .child{ background: green; width: 200px; height: 200px; position: absolute; left: 50%; transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <!-- 父级标签 -->
    <div class="parent">
        <!-- 子级标签 -->
        <div class="child"></div>
    </div>
</body>
</html>

效果：

　　在代码能够看出我并无将宽度设置成浏览器的宽度

　　　　在给子级标签设置position属性值为absolute（绝对定位）时

　　　　　　若是父级标签没有设置定位的话，当前元素是相对于页面的

　　　　　　若是父级标签开启了定位的话，当前标签是相对于父级标签进行定位的

　　　　若是我将上面代码的父级标签position属性去掉的话将会是以下效果：

　　　　能够看出子级标签并无相对于父级进行定位了

　　　　设置了position属性后才能设置其left属性（距离左边标签的距离），若是不设置position属性，left属性将会是无效的

　　　　transform属性表示平移的意思，而translateX表示水平的平移，若是写上负值将会向左平移，若是写上的值是以百分比表示，将会平移自身宽度*百分比的距离，因此这里写上translateX(-50%)表示左平移100px ,我前面设置的是200px宽度

　　　　这种布局方式的优缺点：

　　　　　　优势：不论父级标签是否脱离了文档流，对子级标签都不会影响水平居中效果

　　　　　　缺点：transform属性是CSS3中新增属性，浏览器支持状况很差

四丶对位置进行单独计算，这种方法效果太差，很差管理，也不利于阅读。（这个不写了）

以上就是对div进行的水平居中几种方式

学习记录

下篇垂直居中