CSS元素（文本、图片）水平垂直居中方法

前端开发作者： 2024-06-14 18:25:01

1、text-align:center; 2、margin:0auto; 3、display:inline-block;+text-align:center; 4、position:relative;+float:left;

1、text-align:center;

2、margin:0 auto;

3、display:inline-block; + text-align:center;

4、position:relative; + float:left;

5、line-height

6、上下左右padding

7、position:absolute; + margin:auto;

8、position:absolute; + 负margin

9、position:absolute; + calc()

10、table-cell + vertical-align + inline-block + text-align

11、伪元素 + vertical-align + inline-block + text-align

12、position:absolute; + transform:translate(-50%,-50%);

13、display:flex;

14、background-position:center;

15、writing-mode

1、text-align:center;

2、margin:0 auto;

3、display:inline-block; + text-align:center;

4、position:relative; + float:left;

5、line-height

6、上下左右padding

7、position:absolute; + margin:auto;

8、position:absolute; + 负margin

9、position:absolute; + calc()

10、table-cell + vertical-align + inline-block + text-align

11、伪元素 + vertical-align + inline-block + text-align

12、position:absolute; + transform:translate(-50%,-50%);

13、display:flex;

14、background-position:center;

15、writing-mode

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_27062.html

相关资讯： CSS元素（文本、图片）水平垂直居中方法

CSS元素（文本、图片）水平垂直居中方法

1、text-align:center;

2、margin:0 auto;

3、display:inline-block; + text-align:center;

4、position:relative; + float:left;

5、line-height

6、上下左右padding

7、position:absolute; + margin:auto;

8、position:absolute; + 负margin

9、position:absolute; + calc()

10、table-cell + vertical-align + inline-block + text-align

11、伪元素 + vertical-align + inline-block + text-align

12、position:absolute; + transform:translate(-50%,-50%);

13、display:flex;

14、background-position:center;

15、writing-mode

猜你喜欢

相关新闻

推荐模板

推荐精华

热门标签