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

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. python3 格式化输出，字符串操作，模块，列表，元组

    初识python,在网上看了老男孩的视频,建立一个博客将自己所学的python知识记录下来. input加密,用于输入密码的阶段. import getpass user = input(" ...

  2. ubuntu下如何使得普通用户能够启动wireshark?

    一. 将dumpcap的用户组更改为wireshark sudo chgrp wireshark /usr/bin/dumpcap 二. 设置其他用户也具有与root一样的权限来执行dumpcap s ...

  3. Cortex-M3 在C中上报入栈的寄存器和各fault状态寄存器

    因为在标准C语音中是不能获取SP指针的.因而,如果想通过C代码来获取入栈的寄存器值,需要配合一小段汇编代码来获取当前的SP值,然后再把这个SP值以参数形式传送给C代码,最后以指针的形式把栈中的各寄存器 ...

  4. Scope 'request' is not active for the current thread

    Unable to instantiate Action, getUserAction, defined for 'getUser' in namespace '/'Error creating be ...

  5. JSTL核心标签库详解

    <c:out>标签 标签用于输出一段文本到浏览器中. 属性名 是否支持EL 属性类型 属 性 描 述 value true Object 指定要输出的内容 escapeXml true B ...

  6. zabbix客户端监控

    1.安装zabbix客户端软件: yum install -y zabbix20-agent2.修改配置文件vim /etc/zabbix_agentd.conf修改如下: (1)更改Server,S ...

  7. 阶段3 3.SpringMVC·_06.异常处理及拦截器_3 SpringMVC异常处理之异常处理代码编写

    分三步 新建exception的包.然后添加SysException类 一般写异常都继承.Exception 定义Messgae属性,生成get和set 生成带参数的构造方法 选中异常的代码 Ctrl ...

  8. TCP/IP及内核参数优化调优(转)

    Linux下TCP/IP及内核参数优化有多种方式,参数配置得当可以大大提高系统的性能,也可以根据特定场景进行专门的优化,如TIME_WAIT过高,DDOS攻击等等.如下配置是写在sysctl.conf ...

  9. python爬虫小实例

    1.python爬取贴吧壁纸 1.1.获取整个页面数据 #coding=utf-8 import urllib def getHtml(url): page = urllib.urlopen(url) ...

  10. 如何把本地文件上传至github?

    (都说git好用,但我觉得git把我弄得像个git……在反反复复用git bash的命令行上传失败了N次之后,终于可以用命令行把文件上传到GitHub了 这中间,还要感谢网络上的各种git教程!!!) ...