Question
How do you center an element horizontally in CSS?
Answer
There is no single "center" property — the right technique depends on what you are centering: text uses text-align, a fixed-width block uses auto side margins, and flex children use justify-content.
The three everyday cases:
Inline content or text — set text-align: center on the parent, which centres the text and inline elements inside it:
.container { text-align: center; }
A block element with a known width — give it auto left and right margins, which split the leftover space evenly on both sides:
.box {
width: 200px;
margin: 0 auto; /* must have a width for this to do anything */
}
Flex children — make the parent a flex container and use justify-content (horizontal axis) and optionally align-items (vertical axis):
.container {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
}
A quick lookup:
| What you have | How to center it horizontally |
|---|---|
| Text / inline content | text-align: center on the parent |
| Block with a width | margin: 0 auto |
| Flex children | justify-content: center on the flex parent |
The most common mistake is margin: 0 auto doing nothing — almost always because the block has no explicit width and is already filling the row.
Go deeper:
Centering in CSS: a complete guide (CSS-Tricks) — a decision tree covering horizontal, vertical, and both-axis centering for every kind of element.
Note saved — thanks!
Question
What are hybrid mobile applications, and what variants exist?
Answer
Hybrid apps run web technology inside a native app shell, so one codebase ships to multiple platforms while still looking and installing like a real app.
The goal of a hybrid app is to hide the seams: from the user's point of view it is just an app from the store, even though a web application is running inside a "native frame". This buys you native distribution and hardware access without writing a separate app for each OS. There are three main variants, which differ in how much is really web vs. native:
| Variant | How it works | Example |
|---|---|---|
| Browser-based | a WebView displays the web app, with plugins for hardware | Cordova, Ionic |
| Native UI | JS logic, but it renders real native widgets | React Native |
| Cross-compiled | code is compiled to native machine code | Flutter, Xamarin |
- Browser-based (Cordova / Ionic) — your HTML/CSS/JS runs in an embedded browser (WebView), and plugins bridge to the camera, GPS, etc. Easiest path from an existing web app, but performance is the weakest of the three.
- Native UI (React Native) — you write JavaScript, but it maps to actual native UI components, so the interface looks and performs more native.
- Cross-compiled (Flutter) — Dart code is compiled to native ARM code and drawn by its own rendering engine, giving the best performance among hybrid approaches.
Memory tip: all three trade a bit of native performance for one shared codebase; they just draw the web/native line in different places.
Note saved — thanks!