美文网首页工作生活
CSS居中方式理解

CSS居中方式理解

作者: _十六 | 来源:发表于2019-06-30 14:22 被阅读0次

今天先介绍一下定位居中和外边距居中方法,改天再说flex居中和grid居中吧。

1.块级元素水平居中(相对于父元素);

设置水平方向外边距为auto就能实现元素水平居中;

2.文本内容垂直居中

设置文本元素的高度和行高一致就能实现文本内容垂直居中;

3.块级元素水平垂直居中(相对于父元素)

绝对定位负边距法,同样适用水平居中

首先需要设置父级元素position属性;相对定位即可;然后在给子元素添加属性top值为50%;margin-top值为子元素高度负的一半;

同时left值为50%;margin-left值为子元素宽度负的一半;

相关文章

  • CSS居中方式理解

    今天先介绍一下定位居中和外边距居中方法,改天再说flex居中和grid居中吧。 1.块级元素水平居中(相对于父元素...

  • CSS居中小结

    下面是CSS居中的几种方法: 水平居中元素: 通用方法,元素的宽高未知 方式一:CSS3 transform 方式...

  • 前端常见编程题

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

  • 2018-09-26

    转载:CSS实现水平垂直居中的10种方式

  • CSS常见布局技巧

    1.HTML中css水平居中的几种方式

  • 垂直居中的方法

    行内元素居中 html css before元素居中 html css table-cell居中 css 垂直居中...

  • CSS图片居中(水平居中和垂直居中)

    css图片水平居中 css图片垂直居中 css图片水平垂直居中

  • CSS布局(不完全)总结

    CSS布局(不完全)总结 实现水平居中布局的几种方式 方法一: 通过以下CSS代码实现水平居中布局 方法二: 通过...

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

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

  • 每日一题

    1.router实现原理2.css居中方式

网友评论

    本文标题:CSS居中方式理解

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