css布局--水平垂直居中

1. 使用text-align 和 vertical-align 和 inline-block实现水平垂直居中

html

<div class="parent">
  <div class="child">使用vertical-align,text-align,inline-block实现水平垂直居中</div>
</div>

css

  .parent{
    vertical-align: middle;
    text-align: center;
    height:300px;
    line-height: 300px;
  }
  .child{
    display: inline-block;
  }

2. 使用positon实现水平垂直居中

html

<div class="parent">
  <div class="child">使用positon实现水平垂直居中</div>
</div>

css

  .parent{
    position: relative;
    height: 300px;
  }
  .child{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
  }

3. 使用flex实现水平垂直居中

html

<div class="parent">使用flex实现水平垂直居中</div>

css

  .parent{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
  }
时间: 2024-10-06 05:47:14

css布局--水平垂直居中的相关文章

CSS制作水平垂直居中对齐 多种方式各有千秋

作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对 于我这样的初学者有一定的帮助. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足

《转》CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)

转自大地Dudy的CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳) 本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE系列只测试了IE9和IE6,以下所说的IE的支持性只是相对于IE9和IE6来说的: 一.元素的水平垂直居中: 第一种方法: <!doctype html> <html lang="en&

CSS制作水平垂直居中对齐

作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对于我这样的初学者有一定的帮助. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处

转 CSS制作水平垂直居中对齐各种方法总结

作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对于我这样的初学者有一定的帮助. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处

CSS实现水平垂直居中小结

版权声明:本文为博主原创文章,未经博主允许不得转载. 水平居中 水平居中实现只要设置margin:0 auto;就可以实现 <code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined

CSS 布局 - 水平 &amp; 垂直对齐的集中方法案例解析

CSS 布局 - 水平 & 垂直对齐 水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘. 元素通过指定宽度,并将两边的空外边距平均分配: div 元素是居中的 实例 .center{margin:auto; width:50%; border:3pxsolidgreen; padding:10px; } 注意: 如果没有设置 width 属性(或者设置 100%),

css实现水平 垂直居中

css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平居中</title> <style> .box1{ border: 1px solid #000; text-align: center; } .box2{ display: inline-block; backgroun

css各种水平垂直居中

css各种水平垂直居中,网上查了一下,总结以下几种 line-height垂直居中 缺点,仅限于单行文字 .item{ text-align: center; height: 100px; line-height: 100px; } 效果:http://runjs.cn/code/rmjiq3a8 padding垂直居中缺点,内容不确定时,高度不好固定 .item{ padding: 40px 0; } 效果:http://runjs.cn/code/hg5yrpm8 margin垂直居中 需要

CSS实现水平垂直居中方式

1.定位 核心代码实现请看示例代码中的注释: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>CSS水平垂直居中实现方式--定位实现</title> <style type="text/css"> *{ margin: 0; padding: 0; } .p{ /*父元