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

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. 石川es6课程---8、字符串

    石川es6课程---8.字符串 一.总结 一句话总结: · es6字符串新增两个方法:startsWith(以什么开头),endsWith(以什么结尾) · 新增反单引号:可以解析变量,可以折行:le ...

  2. python 购物车+用户认证程序

    创建文件a.txt,b.txt.c.txt用于存放应该持续保存的信息 a.txt :用户密码输入错误3次就锁定 b.txt :购物时的活动,每个用户只能参与一次 c:txt :购物完后的发票在这里查看 ...

  3. mysql 查询锁表，解锁

    //1.查看当前数据库锁表的情况   SELECT * FROM information_schema.INNODB_TRX;   //2.杀掉查询结果中锁表的trx_mysql_thread_id ...

  4. cad二次开发中DBText对象的外框GeometricExtents有问题？

    CAD2007版本 acDoc.Editor.WriteMessage( string.Format("[{0:F1},{1:F1},{2:F1}] - [{3:F1},{4:F1},{5: ...

  5. mysql之索引 应用于事物 内连接、左（外）连接、右（外）连接

    什么是索引 索引就像是一本书的目录一样,能够快速找到所需要的内容 索引的作用 加快查询速率,降低IO成本加快表与表之间的连接,减少分组和排序时间 索引类型 普通索引:没有唯一性的基本索引 唯一索引:有 ...

  6. 六十：Flask.Cookie之flask设置cookie的有效域名

    设置cookie有效域名cookie默认只能在主域名下使用,如果要在子域名下使用,则应该给set_cookie设置属性domain='.主域名',此时,此cookie在此主域名下的所有子域名均有效 f ...

  7. kvm的使用（2）

    一.远程管理kvm虚机 (2)有些情况下,有一个要配置的地方. 因为 KVM(准确说是 Libvirt)默认不接受远程管理,需要按下面的内容配置被管理宿主机中的两个文件: vim /etc/defau ...

  8. php下关于字符串与数组的相互转换的函数

    public static function string2array($tags)    {        return preg_split('/\s*,\s*/',trim($tags),-1, ...

  9. MUT值设置、top等命令无法执行、ssh无法登陆、vim命令卡住

    [root@host---- ~]# ifconfig eth0: flags=<UP,BROADCAST,RUNNING,MULTICAST> mtu inet 10.1.1.204 n ...

  10. javascript原生知识点

    1. 基本类型有哪几种?null 是对象吗?基本数据类型和复杂数据类型存储有什么区别? 基本类型有6种,分别是undefined,null,bool,string,number,symbol(ES6新 ...