水平居中如果不太熟悉盒子模型的话属实不太好理解，其实就是控制其他属性来让border之内的内容被控制在父容器中间就行了，最经典的就是使用{margin： 0  auto}了，控制其上下外边框为0，左右两边自动根据父容器的宽度调整为相同的数值把内容卡在中间就可以了。

<style>

        .parent{

            display: block;

            width: 200px;

            border: 1px solid;

        }

        .child{

            display: block;

            margin: 0 auto;

            width: 100px;

            height: 50px;

            background-color: aqua;

        }

    </style>

    <body>

        <div class="parent">

            <div class="child"></div>

        </div>

    </body>

　　垂直对齐内容则有挺多办法的，有通过使用设置position:absolute把容器移动到父容器的50%距离上然后上移一半height的，这个通过margin-top设置为负数之类的都可以解决，或者设置display: inline-block;和vertical-align: middle;也可以做到,还有设置position为表样式的，方法很多。

<style>

        *{padding: 0;margin:0;}

        .box{

            position: absolute;

            top: 50%;

            left: 50%;

            margin-top: -50px;

            margin-left: -50px;

            width: 100px;

            height: 100px;

            border: 1px solid red;

        }

    </style>

    <body>

        <div class="box">

        </div>

    </body>

CSS的水平居中和垂直居中的更多相关文章

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

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

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

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

  3. 【CSS】水平居中和垂直居中

    水平居中和垂直居中 2019-11-12  15:35:37  by冲冲 1.水平居中 (1)父级元素是行内元素,子级元素是行内元素,子级元素水平居中 ① 设置父级元素为块级元素 display:bl ...

  4. css的水平居中和垂直居中总结

    Html代码: <div class="md-warp"> <div class="md-main">块级元素</div> ...

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

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

  6. css元素水平居中和垂直居中的方式

    关于居中的问题,一直处于疑惑不解的状态,知道的几种方法好像也不是每一次都会起到作用,所以更加迷惑.主要是不清楚该 在什么情况下采用哪种解决方法,所以,整理了一些方法,梳理一下思路,做一个总结. 1. ...

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

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

  8. 在CSS中水平居中和垂直居中：完整的指南

    这篇文章将会按照如下思路展开: 一.水平居中 1. 行内元素水平居中 2. block元素水平居中 3. 多个块级元素水平居中 二.垂直居中 1. 行内元素水平居中 2. block元素水平居中 3. ...

  9. css样式水平居中和垂直居中的方法

    水平居中(包含块中居中) 1. 定宽,左右margin为auto.(常规流块盒.弹性项目[不用定宽]) 例子:在box1盒子上设置宽,再设置margin:auto: <style> .bo ...

  10. 【CSS】水平居中与垂直居中

    有宽度的div水平居中 1.左右margin设为auto即可 .center { width: 960px; margin-left: auto; margin-right: auto; } 2.绝对 ...

随机推荐

  1. Python接口开发小知识

    关于数据库设计 接口开发多学习数据库表操作,这是要点 不存在删除数据,每个可能被删除数据的表加一个is_active属性 不同的表可以有多个相同的字段,字段属性少用禁止非空 不要设置太多主外键(高内聚 ...

  2. 学习 Laravel - Web 开发实战入门笔记(1)

    本笔记根据 LearnKu 教程边学边记而成.该教程以搭建出一个类似微博的Web 应用为最终成果,在过程中学习 Laravel 的相关知识. 准备开发环境 原教程使用官方推荐的 Homestead 开 ...

  3. 一次生产的JVM优化

    背景 生产环境有二台阿里云服务器,均为同一时期购买的,CPU.内存.硬盘等配置相同.具体配置如下: 节点 CPU 内存 硬盘 其它 A 2CPU 4G 普通云盘 Centos6.4 64位+JDK1. ...

  4. 位运算解决“一个数组中，只有一个数字出现n次，其他数字出现k次”问题

    转自:https://blog.csdn.net/monster_girl/article/details/52928864 在学习完位操作后,经常会遇到一类关于查找缺失整数的问题. 第一类是给你一个 ...

  5. Codeforces 1239A. Ivan the Fool and the Probability Theory

    传送门 注意到连续两个格子如果有相同颜色那么一路过去的都可以确定 比如一开始染了这两个位置: 然后发现后面整片过去都可以确定: 对于横着的情况也是一样,然后就会发现不可能出现横着两个和竖着两个同时都有 ...

  6. 执行sql语句，不依靠实体 获取string值

     IList<string> list2 = Session.CreateSQLQuery(sql.ToString()).List<string>();

  7. GTA4 EFLC cheat code

    GTA4 EFLC cheat code 提示警告:您的图像设置接近或超出您的系统推荐资源限制,为了使游戏运行更加流畅推荐你降低你的图像设置. 在游戏目录新建名为 commandline的txt文本文 ...

  8. Hadoop 3相对于hadoop 2的新特性

    相对于之前主要生产发布版本Hadoop 2,Apache Hadoop 3整合许多重要的增强功能. Hadoop 3是一个可用版本,提供了稳定性和高质量的API,可以用于实际的产品开发.下面简要介绍一 ...

  9. 409 Conflict - PUT https://registry.npm.taobao.org/-/user/org.couchdb.user:zphtown - [conflict] User xxx already exists

    解决方法cmd执行 npm config set registry https://registry.npmjs.org/ 为什么,参考此文档:https://blog.csdn.net/adc_go ...

  10. python之字典一

    字典的定义: 前面我们说过列表,它适合于将值组织到一个结构中并且通过编号对其进行引用.字典则是通过名字来引用值的数据结构,并且把这种数据结构称为映射,字典中的值没有特殊的顺序,都存储在一个特定的键(k ...