css中button按钮怎么在一个div里居中

我们可以通过display:flex;属性将div元素设置为弹性布局,用来为div元素提供最大的灵活性。

align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

示例如下:
```html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

div{

width:200px;

height:200px;

border:1px solid #000;

display:flex;

justify-content:center;

align-items:center;

}

</style>

</head>

<body>

<div><button>按钮</button></div>

</body>

</html>
```

版权声明:
作者:tianya
链接:https://tya.zone/p/53.html
来源:天涯博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
css中button按钮怎么在一个div里居中
我们可以通过display:flex;属性将div元素设置为弹性布局,用来为div元素提供最大的灵活性。 align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方……
<<上一篇
下一篇>>