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

  1. <style>
  2.         .parent{
  3.             display: block;
  4.             width: 200px;
  5.             border: 1px solid;
  6.         }
  7.         .child{
  8.             display: block;
  9.             margin: 0 auto;
  10.             width: 100px;
  11.             height: 50px;
  12.             background-color: aqua;
  13.         }
  14.     </style>
  15.     <body>
  16.         <div class="parent">
  17.             <div class="child"></div>
  18.         </div>
  19.     </body>

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

  1. <style>
  2.         *{padding: 0;margin:0;}
  3.         .box{
  4.             position: absolute;
  5.             top: 50%;
  6.             left: 50%;
  7.             margin-top: -50px;
  8.             margin-left: -50px;
  9.             width: 100px;
  10.             height: 100px;
  11.             border: 1px solid red;
  12.         }
  13.     </style>
  14.     <body>
  15.         <div class="box">
  16.  
  17.         </div>
  18.     </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. 剑指offer3：从尾到头打印链表每个节点的值

    1. 题目描述 输入一个链表,从尾到头打印链表每个节点的值. 2. 思路和方法 2.1 推荐的方法 (1)栈,循环 后进先出,我们可以用栈实现这种顺序.每经过一个结点的时候,把该节点放到一个栈里面,当 ...

  2. VirtualBox网络之仅主机(Host-Only)网络

    https://blog.csdn.net/dkfajsldfsdfsd/article/details/79441874

  3. Python（六） —— 网络请求

    接口调用 接口调用有几个模块可以用:urllib 和 requests ,urllib 是内置的模块,极其不好用,强烈推荐用 requests 模块 get 请求 1.普通的 get 请求 impor ...

  4. 微信小程序页面跳转传参方式

    //实现跳转的A页面 jump: function () { let a = 1; let b = 2; wx.navigateTo({ url: '/page/vipOrder/vipOrder?d ...

  5. centos7 开放/关闭防火墙和端口

    --------------------------------------------------------------防火墙----------------------------------- ...

  6. JavaMaven【五、Maven集成Eclipse使用】

    创建Maven项目 右键->new->other(Ctrl+n)->Maven Project->quickStart(catalog) 执行指令 右键->Run As- ...

  7. Java学习笔记【十一、序列化】

    序列化的条件 实现Serializable接口 所有属性必须是可序列化的,或标记为transient(不做序列化) 序列化-将对象输出为序列化文件 ObjectOutputStream 反序列化-将序 ...

  8. 招商银行网银在Mac上装了插件仍然无法登录

    1 装完插件后,在登录页面重新载入插件,再次打开

  9. pytest的使用

    一.python安装 1.windows(server): 双击python-3.6.7-amd64.exe执行安装流程,使用默认安装方式即可. 安装完成后查看是否安装成功: C:\Users\Adm ...

  10. Vim生存技能

    Vim生存技能 必备:   写模式: i,a,o   退出写模式: ecs 快捷:   Ctrl+u: 向文件首翻半屏   Ctrl+d: 向文件尾翻半屏   Ctrl+f: 向文件尾翻一屏   Ct ...