美文网首页
居中的方式

居中的方式

作者: 自由落体_4deb | 来源:发表于2018-03-28 18:59 被阅读0次

1、水平居中

width: 100px;
margin: 0 auto;

如果是字体的话,最好的居中方式text-align: center

2、水平垂直居中

  • 不知道容器的宽高,这也是最常用的一种方法
<div id="app">
  <div class="global"></div>
</div>
#app {
  position: fixed或者absolute; // 总之要脱离普通的文档流,fixed就是浏览器的窗口大小
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: pink;
  height: 100%;
  width: 100%; // 必须写上
}
.global {
  position: absolute;(绝对定位、相对定位都可以)
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: yellow;
}
  • 知道容器的宽高
<div id="app">
  <div class="global"></div>
</div>
#app {
  position: fixed或者absolute; // 总之要脱离普通的文档流
  width: 100%;
  height: 500px;
  background: pink;
}
.global {
  position: absolute;(绝对定位、相对定位都可以)
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  // transform: translate(-50%, -50%); 
  margin: -50px 0 0 -50px; // 边距设置为宽高的负一半值
}
  • flex布局,使用非常方便,但要注意兼容性,在IE上有很大的问题
<div id="app">
  <div class="global"></div>
</div>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 500px;
  background: pink;
}
.global {
  width: 100px;
  height: 100px;
  background: yellow;
}

为整张页面设置背景色有两种方式

1、在根元素html当中设置,这种方法有一弊端,整个项目都会有所设置的属性
2、在最外层的div中设置,但会产生一个问题,background不会占满整个屏幕,因为每个浏览器都有默认的
margin值,要解决这个问题,就是在body中,把margin的值重置为0

总结:

1、普通文档流(normal flow)默认width: auto; height: auto,width默认会与浏览器的窗口对齐,因为高
度是可以无限延长的,所以把height: 100%这样设置并不管用,必须给html、body也加上这个属性才管用。

2、当position: absolute(fixed),此时已经脱离普通文档流了,也意味着没有width: auto; 
height: auto默认属性了,所以width、height都随自己设置,如果要满屏的话,
width: 100%; height: 100%

相关文章

  • 前端常见编程题

    CSS篇 垂直居中 方式一 方式二 方式三 方式四 方式五 方式六 水平居中 方式一 方式二 方式三 方式四 布局...

  • 居中的方式

    1、水平居中 如果是字体的话,最好的居中方式text-align: center 2、水平垂直居中 不知道容器的宽...

  • CSS布局小技巧

    1.让元素水平垂直居中 文字水平垂直居中 2.让元素垂直居中 2.1 flex方式 2.2 position方式 ...

  • 水平居中和垂直居中

    本章介绍几种常见的水平居中和垂直居中的实现方式

  • margin auto

    1. margin auto 与垂直居中 关于垂直居中的方式方式1:利用父元素position:relative和...

  • CSS居中的几种方式

    本文主要总结几种常见的CSS居中方式,下面我准备分为三个方向来写,分别是水平居中,垂直居中,水平垂直居中。水平居中...

  • CSS中几种常用的居中

    居中 行内元素水平居中 文字相对图片、输入框垂直居中 块元素水平居中 单行文字垂直居中 更灵活的布局方式当然是建议...

  • css 水平垂直居中实现方式

    css 水平垂直居中实现方式 水平垂直居中包括行内元素居中,以及块级元素居中 行内元素html结构 块级元素结构 ...

  • 垂直水平居css

    学到一种垂直水平居中方式给需要居中的目标元素 加 它会垂直水平居中与父元素

  • 351.bootstrap的居中和内联

    居中有3种方式: 文本居中。利用text-center类。 图片居中。利用block-center类。 其它元素居...

网友评论

      本文标题:居中的方式

      本文链接:https://www.haomeiwen.com/subject/pqxzqftx.html