水平居中（包含块中居中）

1. 定宽，左右margin为auto。（常规流块盒、弹性项目[不用定宽]）

例子：在box1盒子上设置宽，再设置margin：auto；

<style>

    .box1 {

        width: 200px;

        height: 200px;

        background-color: black;

        margin: auto;

    }

</style>

<body>

    <div class="box-all">

        <div class="box1"></div>

    </div>

</body>

得到的效果：

2. 弹性盒设置justify-content: center，让弹性项目在主轴上居中。（普遍适应）

例子：在其父元素上设置弹性盒子，和对齐方式；

<style>

    .box-all {

        display: flex;

        justify-content: center;

    }

    .box1 {

        width: 200px;

        height: 200px;

        background-color: black;

    }

</style>

<body>

    <div class="box-all">

        <div class="box1"></div>

    </div>

</body>

得到的效果：

3. 父元素设置text-align: center，让其内部的行盒、块盒居中（文本）。

例子：在盒子上设置text-align:center；文本自动居中；

<style>

    p {

        text-align: center;

    }

</style>

<body>

    <div class="box-all">

        <p>这是一段文本。</p>

    </div>

</body>

得到的效果：

4. 相对定位元素，margin-left:50%; transform:translateX( -50%)。[margin,padding相对于包含块宽度的百分比] 【终极方案】

例子：对盒子设置相对定位属性，在用上面方式进行定位；

<style>

    .box1 {

        width: 200px;

        height: 200px;

        background-color: black;

        position: relative;

        margin-left: 50%;

        transform: translateX(-50%);

    }

</style>

<body>

    <div class="box-all">

        <div class="box1"></div>

    </div>

</body>

得到的效果：

垂直居中（方法与上面类似，我就不演示了）

1. 单行文本垂直居中，设置父元素的line-height为包含块高度。

2. 弹性盒设置align-items:center，让弹性项目在侧轴上居中。

3. 相对定位元素，top：50%；transform:translateY(-50%)。【终极方案】

css样式水平居中和垂直居中的方法的更多相关文章

  1. CSS元素水平居中和垂直居中的方法大全

    水平居方法: 1.最熟悉的是给元素定义一个宽度,然后使用margin: body{ width:960px; margin:0 auto;}这个是当我们的定义元素的宽度时显现的,如果我们不能定义宽度时 ...

  2. CSS中元素水平居中和垂直居中的方法

    #CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...

  3. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  4. css样式之vertical-align垂直居中的应用

    css样式之vertical-align垂直居中的应用:将图片垂直左右居中 元素垂直居中 1:必须给容器父元素加上text-align:center 2:必须给当前元素转换成行内块元素,display ...

  5. CSS：水平居中与垂直居中

    CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中. 水平居中 1.行内元素 行内元素(主 ...

  6. CSS的水平居中和垂直居中解决方案

    在写CSS样式的时候,有时为了美观,会添加水平居中和垂直居中,这时候你有可能会遇到很棘手的问题,有些水平居中和垂直居中的属性添加上去完全没反应,下面给大家列举一些CSS水平居中和垂直居中的终极解决方案 ...

  7. 主流 CSS 布局(水平居中、垂直居中、居中 )

    什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...

  8. CSS样式，语法，添加方法，文本，字体

    总结一些css的基础知识 ㈠css样式 css:cascading style sheets  层叠样式表 css内容和样式相分离,便于修改样式. ㈡css语法 ㈢css添加方法 ⑴行内添加:放在&l ...

  9. 在网页中插入CSS样式表的几种方法

    1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head> ...

随机推荐

  1. MySQL5.7快速修改表中字段长度

    在mysql 5.5版本时,商用环境升级,有一个表存在六千多万数据,升级时需要修改这个表其中一个varchar类型字段的长度,当时用了大概4个多小时,还没有结束,之后我们系统mysql升级到5.7版本 ...

  2. koa 基础（九） ejs 模板引擎的使用

    1.app.js /** * ejs 模板引擎的使用: * 1.npm install koa-views --save * 2.npm install ejs --save * 3.var view ...

  3. mysql常用操作与日志

    在linux上的mysql命令 mysql -e "mysql内部命令" #可在外部显示myslq内的输出,-e可跟多条命令用;隔开 在mysql内的mysql命令 system ...

  4. 如何实现一个串行promise

    异步执行任务A.B.C,...... 1.使用数组的reduce方法,reduce里有四个参数,pre,next,index,arr, 2.如果then方法里返回的是一个promise对象,那么执行下 ...

  5. SSH开发中 使用超链接到action 其excute方法会被执行两次 actual row count: 0; expected: 1

    由于执行两次excute,所以在做删除操作的时候会出现 Batch update returned unexpected row count from update [0]; actual row c ...

  6. 01 numpy库(一)

    01-numpy NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库. NumPy 是一个运行 ...

  7. C++中 关于操作符的重载

    C++实现了类的定义,也可以对类之间的操作符进行定义,又叫重载. 例如同类之间的 加.减法,赋值等等操作. 具体看http://blog.csdn.net/zhy_cheng/article/deta ...

  8. 使用shiro遇到的问题

    Caused by: java.lang.NoClassDefFoundError: net/sf/ehcache/CacheException 解决问题:缺少一个依赖的缓存jar 添加: <d ...

  9. body和document的梗

    http://bbs.zhinengshe.com/thread-1199-1-1.html 1. 在空白的页面加点击事件,是加在body上么 ? <!DOCTYPE html> < ...

  10. React Native 安装

    第一 :在天朝如果你可以违规上网的话便可以按 react native 中文网的文档进行安装与调试.地址为:https://reactnative.cn/docs/getting-started.ht ...