Home > Article > Web Front-end > How to center button in div in css
How to center button in div in css
- WBOYOriginal
- 2021-12-03 18:18:5610277browse
Method: 1. Add the "display:flex" style to the div element and set the div element to a flexible layout style; 2. Add the "align-items:center;justify-content:center" style to the div element. Just set the button element within the div to be centered horizontally and vertically.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to center the button in the div in css
We can set the div element to a flexible layout through the display:flex; attribute, which is used to The div element provides the most flexibility.
align-items property defines the alignment of flex items in the direction of the cross axis (vertical axis) of the current row of the flex container.
justify-content is used to set or retrieve the alignment of the flexible box element in the main axis (horizontal axis) direction.
The example is as follows:
<!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>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to center button in div in css. For more information, please follow other related articles on the PHP Chinese website!